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

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

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