如何使用 next/router 在下一个 js 中返回上一页？答案

【问题标题】：How to go back to previous page in next js using next/router?如何使用 next/router 在下一个 js 中返回上一页？
【发布时间】：2021-09-01 01:37:36
【问题描述】：

我正在为我的应用程序使用下一个 js，并且在路由到应用程序的上一个路由时遇到了一些问题。我知道路由器功能 back() 类似于 window.history.back()，我想在单击链接时返回路由，并且如果上一个链接不是来自我的应用程序或为null，我想默认进入首页。

我在我的 react 应用程序中使用了 react-router-last-location 之类的库，但我想看看是否有更好的方法可以通过 next/router 在下一个 js 中实现。

这是我的示例代码：

<div className={styles['icon-container']}>
  <Link  href="/"><a>
     <img src="icon.svg"></img>
  </a></Link>
</div>

如果我在 href 输入中使用 router.back()，页面甚至在加载之前就会自动返回，我该如何解决这个问题？

【问题讨论】：

您能否添加一些有关用例的更多信息，即您为什么要这样做。这将有助于人们给出更全面的答案。 :)
我不了解您的用例和/或要求，但我认为劫持后退导航以将用户留在您的应用程序中是一种相当糟糕的用户体验。如果我不小心导航到你的 web 应用程序并立即尝试退出并不断跳到你的主页，我想我不是唯一一个我不想再次访问的人。
不，我没有劫持后退导航！这是一个自定义的后退按钮，将出现在我的网站中，以便他们查看帖子并返回提要！

标签： reactjs next.js next-router

【解决方案1】：

<Link> 不能离开您的应用程序。（但router.back()可以）

你不能在代码中直接使用router.back()，你需要这样做：

<img onClick={() => router.back()} src="icon.svg" />

<Link> 没有 onClick 属性。

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()

  return (
    <button type="button" onClick={() => router.back()}>
      Click here to go back
    </button>
  )
}

信息来源here

【讨论】：

这段代码如何防止返回导航到应用程序之外并重定向到主页？
不知道，使用路由器你不能做到这一点。您需要检查 .sessionStorage 或 .localstorage