Question

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

我在我的 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()，页面会在加载之前自动返回，我该如何解决这个问题？

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 在 next js 中返回上一页？

1 个答案: