react router doesn't work in aws s3 bucket

I'm not sure if you have already solved it. I had the same issue.

It's because AWS S3 is looking for that folder (projects) to serve from, which you don't have.

Simply point Error document to index.html.

This worked for me. You can handle error pages in react-router.

Update 1 May 2020:

Since this post is quite active, I need to update the answer:

So you have a few options to solve the issue:

1. You can put index.html in the Error document box (like Alan Friedman suggested).
   • Go to your bucket (the one that actually has the code - not the one you use to redirect) -> Properties -> Static website hosting:
   • This is not "hacky" but it works because of the way react-router works: It handles the requests from the front-end and routes users to other routes but overall, the React app is a single-page application.
   • If you want server-side React, consider using Next.js.

2. You can put a designated error file error.html in the public folder of your React app and in the Static website hosting: Error document box, put in: error.html. This also works. I've tested it.

3. Use AWS CloudFront > CloudFront Distributions > The distribution of your bucket > Error Pages and add the error code you want. If you don't use react-router (like the example below), the bucket will respond with Error 403 so you can respond with your error.html.

4. For TypeScript, currently react-router doesn't support it so you should consider option 2 and 3. They're going to update the library in future version 6.* according to this thread.

In case this S3 bucket is served from a CloudFront distribution:

Create a custom error page (AWS Docs) in CloudFront distribution that routes 404 errors to index.html and returns 200 response code. This way your application will handle the routing.

Custom Error Pages