如何使用"Next/router"返回Next.js中的上一页

Question

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

我在react应用程序中使用了react-router-last-location这样的库，但我想看看是否有更好的方法可以通过next/router在Next.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>
)
}

这里的信息来源