ReactJS：防止href替换URL哈希值（令牌）

Question

嗯这很尴尬......坦率地说，我无法绕过这个据称简单的解决方案。基本上，Web应用程序在从Spotify API登录身份验证后生成访问令牌和刷新令牌，它本身就可以正常工作并产生以下结果：

本地主机：3000 /＃=的access_token .. BQCs＆refresh_token = AQCc ...

但是，我有一个按钮，即

 <Button href="#main1"> Foo? </Button>

一旦按下它就会导致页面的一部分并替换URL中的标记，因此当刷新页面时，不会读取必要的标记，因此，没有页面，端点将无法运行。

我尝试过以下方法：

• 实现由onClick（）处理程序触发的event.preventDefault()
• react-scrollable-anchor与goToAnchor('section1', false)
• 一个布尔值，即loggedIn: token ? true : false，它有条件地渲染提供的组件，检测到标记，如果没有，则为window.location='localhost:3000/#access_token=' + access + '&refresh_token=' + refresh
• react router与<Link to={params.access_token}>

不幸的是，由于其完全删除URL哈希的性质，这些方法中的前两个具有相似的初始结果，因此它将留下：

本地主机：3000

另一方面，最后两个只是在刷新页面后给出了未定义的标记值，这意味着即使在初始加载之后也没有存储标记。

解决这个问题的最佳方法是什么？如何有效地保留URL哈希中的访问令牌？一如既往，我们非常感谢任何帮助和建议。谢谢。

Answer 1

最后找到了一种方法去某个组件，而不必在锚定href和/或更改url哈希时做任何麻烦：https://www.npmjs.com/package/react-scroll

请注意，此类方法仅适用于单页Web应用程序。它基本上允许您从一个组件平滑地跳转到另一个组件。我也研究过React-Spring但是在整整一天摆弄之后它对我来说没有用，另一方面，反应滚动为我做了伎俩。