Cannot access page on Refresh due to Hasbangs in a React SPA

Question

I'm using a 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 throws an error (Access denied in my case) as it is not able to handle without the Hashbang.

Note: It works fine if I enter the URL with a hashbang

So essentially, this works: https://example.com/#/dashboard (Redirects to https://example.com/dashboard)

But if I refresh the page, it gives an error like:

We're using browserHistory to maintain the routes. I'm showing the related code only:

<Router history={browserHistory}>
<Route path='/dashboard' component={Dashboardpage} />
</Router>

Answer 1

When you request https://example.com/dashboard, the first request i.e https://example.com is made to the server and it should return the index.html that contains your react-router which is smart enough to understand the path i.e without the hashbangs and loads the required component.So some redirecting routes has to be set up on server side.

In your case when you hit the https://example.com/dashboard, S3 and cloudfront should handle the error codes(i.e 404 or any) and redirect the page to index.html, after that the react-router will handle which component to load.

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

Answer 2

Besides having errors pages setup explained by Shailaja make sure that your CloudFront distribution is pointing to a website endpoint instead of a api endpoint. API Endpoints will not work correctly with react-router.

API Endpoint:

bucket-name.s3-website-region.amazonaws.com

Website Endpoint:

bucket-name.s3-website.region.amazonaws.com