18

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:

enter image description here

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

<Router history={browserHistory}>
<Route path='/dashboard' component={Dashboardpage} />
</Router>
Karan Shah
  • 1,304
  • 11
  • 15

2 Answers2

58

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.

enter image description here

enter image description here

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

Community
  • 1
  • 1
Shailaja shah
  • 846
  • 8
  • 10
  • 1
    can you please edit your answer to attach a screenshot of the CloudFront configuration? – Karan Shah Feb 15 '17 at 10:08
  • 1
    Does this mean my APIs cannot return a 403 forbidden when called ajaxily? – Darcy Oct 27 '17 at 13:53
  • It depends how you want to handle various HTTP error codes. You can list down as shown in the above image. @Darcy – Shailaja shah Oct 30 '17 at 07:04
  • 1
    Awesome, you saved my day. it took all my day to figure out what's going wrong. Thank you . @Shailajashah – matesio Jul 27 '18 at 13:51
  • I tried this solution, but it always redirects to the home page, not the correct page... maybe I need something extra since I'm using Gatsby? – Jim Nov 05 '19 at 00:19
  • It is worth mentioning that the changes take some time to apply – vgulkevic Dec 04 '19 at 23:34
  • also keep in mind you have TTL override for errors, in this screenshot cache TTL is set to just 5 seconds, which is probably way too low for static files app in most cases – Lukas Liesis Aug 04 '21 at 06:31
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

Jingyi Wang
  • 834
  • 7
  • 17