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

Question

我正在为我的应用程序使用下一个 js，但我在路由到应用程序的上一个路由时遇到了一些问题。我知道路由器函数 back() 类似于 window.history.back()，我想在单击 Link 时返回路由，如果之前的 link 不是来自我的应用程序或为空，我想默认转到主页。

我在我的 React 应用程序中使用了像 react-router-last-location 这样的库，但我想看看在下一个 js 中是否有更好的方法通过 next/router。

这是我的示例代码：

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

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

Answer 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

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

How to go back to previous page in next js using next/router?

reactjs

next.js

next-router