Return to Answer

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 route users to other routes but overall, the React app is a single-page application.
• If you want server-side React, consider using Next.js.

enter image description here 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 int 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.

enter image description here

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.

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.

enter image description here

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.

enter image description here

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.

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 route users to other routes but overall, the React app is a single-page application.enter image description here

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 int 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.

enter image description here

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.

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 route users to other routes but overall, the React app is a single-page application.
• If you want server-side React, consider using Next.js.

enter image description here 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 int 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.

enter image description here

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.

Answer to close the question. I've solved this issue thanks to Alan Friedman's comment above:

You need to redirect errors (404 in this case) to the root index.html – Jul 7 at 0:34

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 route users to other routes but overall, the React app is a single-page application. enter image description here

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 int 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.

enter image description here

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 .