如何使用“next/router”返回 Next.js 中的上一页？

Question

我在我的应用程序中使用 Next.js，并且在路由到应用程序的上一个路由时遇到一些问题。我知道back()类似于 的路由器功能window.history.back()，我想在单击 a 时返回到路由Link，如果上一个链接不是来自我的应用程序或者是null，我想转到主页作为默认值。

我使用了类似react-router-last-location我的 React 应用程序的库，但我想看看是否有更好的方法可以通过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>
  )
}

信息来源在这里