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

Question

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

示例：如果我在 whosebug.com 并且我直接导航到 https://whosebug.com/questions/ask I want to be able to click the backbutton and end up in https://whosebug.com/questions 这样的问题这样我就可以查看其他问题了。

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

感谢任何帮助，请提供任何可以帮助我的线索。

Answer 1

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

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

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

如果您有 basePath 或语言环境，那么您可以将它们连接到 asPath。

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

How do I create a dynamic back button using Next.js

url-routing

typescript

reactjs

next.js