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

【问题标题】：ReactJS: Preventing href from replacing URL hash value(token)ReactJS：防止 href 替换 URL 哈希值（令牌）
【发布时间】：2019-08-20 23:53:13
【问题描述】：

这很尴尬......坦率地说，我无法理解这个所谓的简单解决方案。基本上，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 哈希的性质，所以它会留下：

本地主机：3000

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

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

【问题讨论】：

收到令牌后立即将其存储在 sessionStorage 中
感谢您的回复。这是我对第三点的初步思考过程，其中access 和refresh 是由 sessionStorage 或 localStorage 存储的令牌，但是一旦刷新页面，它也会给出一个未定义的值。

【解决方案1】：

终于找到了一种无需麻烦地锚定 href 和/或更改 url 哈希即可访问某个组件的方法： https://www.npmjs.com/package/react-scroll

请注意，这种方法仅适用于单页网络应用程序。它基本上允许您从一个组件平滑地跳转到另一个组件。我也研究了 React-Spring，但在摆弄了一整天后它对我来说并没有奏效，另一方面，react-scroll 为我做了诀窍。

【讨论】：