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

Question

好吧，这很尴尬……坦白地说，我还没能解决这个所谓的简单解决方案。 基本上，该Web应用程序通过Spotify API进行登录身份验证后会生成访问令牌和刷新令牌，并且本身就可以正常工作并产生以下内容：

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

但是，我有一个按钮，即

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

它会在按下页面时指向页面的一部分，并替换URL中的标记，因此当刷新页面时，将不会读取必需的标记，因此，没有该标记，端点将无法运行。

我已经尝试过以下方法：

• 实现由onClick（）处理函数触发的event.preventDefault()
• 使用goToAnchor('section1', false) react-scrollable-anchor
• 一个布尔值，即loggedIn: token ? true : false loggedIn: token ? true : false如果有条件检测到令牌，并且有条件地渲染组件，则window.location='localhost:3000/#access_token=' + access + '&refresh_token=' + refresh如果没有window.location='localhost:3000/#access_token=' + access + '&refresh_token=' + refresh则window.location='localhost:3000/#access_token=' + access + '&refresh_token=' + refresh
• 用<Link to={params.access_token}> 对路由器做出反应

不幸的是，由于它们完全删除了URL哈希的性质，因此前两种方法的初始结果相似，因此将保留以下内容：

本地主机：3000

另一方面，后两个仅在刷新页面后给出未定义的令牌值，这意味着即使在初始加载后也不会存储令牌。

解决这个问题的最佳方法是什么？ 如何有效地将访问令牌保留在URL哈希中？ 与往常一样，任何帮助和建议都将受到高度赞赏。 谢谢。

Answer 1

最终找到了一种无需使用任何麻烦即可锚定href和/或更改url哈希值的方法： https : //www.npmjs.com/package/react-scroll

请注意，这种方法仅适用于一页Web应用程序。 基本上，它使您可以从一个组件平稳过渡到另一个组件。 我也研究了React-Spring，但是在整整一天后，它对我来说还是没有用，另一方面，react-scroll为我解决了问题。