如何使用 Next.js 创建动态后退按钮答案

【问题标题】：How do I create a dynamic back button using Next.js如何使用 Next.js 创建动态后退按钮
【发布时间】：2022-01-31 17:57:07
【问题描述】：

我知道如何创建一个常规的后退按钮。但我想创建一个按钮，让您在 URL 中返回一步，而不是返回上一页。这样，我可以在不同的地方使用按钮，而不必更改代码中的任何内容。但我想不通。我是新手。

示例：如果我在 stackoverflow.com 并直接将自己导航到像 https://stackoverflow.com/questions/ask 这样的问题，我希望能够单击后退按钮并结束在 https://stackoverflow.com/questions 所以我可以查看其他问题。

我正在使用 TypeScript、React、Next 语言。所以我只能使用那些脚本。我在这里发现了一个类似的问题，但他们使用的是 Angular，我不知道如何将其转换为 Next.js

感谢您的帮助，无论您能帮我什么。

【问题讨论】：

标签： reactjs typescript next.js url-routing

【解决方案1】：

您可以通过简单的字符串处理来制作临时解决方案：

const BackButton = () => {
   const { asPath } = useRouter();
   const backUrl = asPath.slice(0, asPath.lastIndexOf('/'));

   return <a href={backUrl}> Back </a>;
}

如果您有 basePath 或 locale，那么您可以将它们连接到 asPath。

【讨论】：

非常感谢！！我不能赞成你的评论，因为我在这个网站上太新了。我花了一段时间才弄清楚你做了什么，但据我了解，你正在让它回到最后一个 /，这太棒了。你对我的学习有什么建议吗，这样我就可以像你一样思考，哈哈。 asPath 对我来说是新的，所以我会阅读更多内容。