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為我解決了問題。