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

Question

Well this is awkward... as frankly enough, I have not been able to wrap my head around this supposedly simple solution. Basically, the web app generates an access token and a refresh token after login authentication from Spotify API and it works just fine per se and produces this:

localhost:3000/#access_token=BQCs..&refresh_token=AQCc...

However, I have a button ie

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

that leads to a section of the page once it's pressed and that replaces the tokens in the URL so when one refreshes the page, the necessary tokens are not read and therefore, the endpoints will not function without it.

I have tried the following methods like:

• implementing event.preventDefault() that is triggered by an onClick() handler
• react-scrollable-anchor with goToAnchor('section1', false)
• a boolean value ie loggedIn: token ? true : false loggedIn: token ? true : false where it conditionally renders the components provided there are tokens detected and window.location='localhost:3000/#access_token=' + access + '&refresh_token=' + refresh if there are none
• react router with <Link to={params.access_token}>

Unfortunately, the first two of these methods had the similar initial outcome due to its nature of completely removing the URL hash so it would be left with:

localhost:3000

The last two, on the other hand, just gives an undefined value of the tokens after refreshing the page which means the tokens aren't being stored even after its initial load.

What is the best approach in tackling this? How does one keep the access tokens in the URL hash effectively? As always, any help and suggestions are highly appreciated. Thanks.

Answer 1

Finally found an approach to go to a certain component without having to do any sort of hassle in anchoring the href and/or changing url hash: https://www.npmjs.com/package/react-scroll

Please do note that this type of approach will only work on one-page web apps. It basically allows you to jump smoothly from one component to another. I also looked into React-Spring but it didn't work out for me after fiddling for a whole day, on the other hand, react-scroll did the trick for me.