ReactJS – Due to Hasbangs in React Spa, you cannot access the Refresh page.

I am using ReactJS SPA created from https://github.com/facebookincubator/create-react-app

I am using S3 and Cloudfront To serve my website. Everything works fine until I reload the page – it will throw an error (access denied in my case) because it cannot be processed without the Hashbang.

Note: If I Enter the URL with the hashbang and it works.

Basically, this is valid: https://example.com/#/dashboard (redirect to https://example.com/dashboard )

However, if I refresh the page, it will show the following error:

enter image description here

We use browserHistory to maintain routing. I only show the relevant code:



When you request https://example.com/dashboard, the first request is https://example.com sent to the server, and it should return the index containing your react-router. html, it is smart enough to understand the path, that is, there are no hashbangs and load the required components. So some redirects must be routed on the server side.

When you encounter https://example. In the case of com/dashboard, S3 and cloudfront should handle the error code (i.e. 404 or whatever) and redirect the page to index.html, then react-router will handle the components to be loaded.

enter image description here

enter image description here

I hope my answer is clear;)

You can also refer to the answer given here React-router urls don’t work when refreshing or writting manually

I am using ReactJS SPA created from https://github.com/facebookincubator/create-react-app

I’m using S3 and Cloudfront to serve my website. Everything works fine until I reload the page-it will throw an error (Access is denied in my case) because it can’t without Hashbang Processing.

Note: If I enter a URL with a hashbang, it works fine

Basically, this is valid: https://example.com/#/dashboard (Redirect to https://example.com/dashboard)

However, if I refresh the page, it will get the following error:

enter image description here

We use browserHistory to maintain routing. I only show the relevant code:

< /p>



< p>

When you request https://example.com/dashboard, the first request is https://examp Le.com sent to the server, it should return index.html containing your react-router, it is smart enough to understand the path, that is, there are no hashbangs and load the required components. So some redirects must be routed on the server side. < p>

In case you encounter https://example.com/dashboard, S3 and cloudfront should handle the error code (i.e. 404 or whatever) and redirect the page to index.html, afterwards react-router will process the components to be loaded.

enter image description here

p>

enter image description here

I hope my answer is clear; )

You can also refer to the answer given here React-router urls don’t work when refreshing or writting manually

Leave a Comment

Your email address will not be published.