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

Question

这很尴尬...坦白地说，我无法绕过这个简单的解决方案。基本上，该Web应用程序通过Spotify API进行登录身份验证后会生成一个访问令牌和一个刷新令牌，它本身就可以正常工作并产生以下信息：

  

localhost：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哈希，因此前两种方法的初始结果相似，因此会保留以下内容：

  

localhost：3000

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

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

Answer 1

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

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