React SPA using react router on S3 with Cloudfront. Can't refresh or direct load link

Question

I have a React SPA app that is on AWS S3 and I'm using Cloudfront. I was getting 404 errors if I refreshed or attempted to directly load any URL other than the root. I have read on other answers that I need to set up a custom error message on Cloudfront to redirect to index.html and show 200 OK. I have done that and I am no longer getting the error message but now I just get shown a white screen. From what I have read this fix seems to work with everyone that has tried it. Does anyone know what I might be doing wrong or how I can fix it?

Answer 1

You have to let the index.html page handle direct paths such as example.com/path in your cloud front as well, you can do this by adding your custom error response in the cloud front.

1. Click the ID of your newly created distribution to reach its settings page, then click on the Error Pages tab. Select Create Custom Error Response.
2. Select Yes for a custom error response, set/index.html for the response page path and 200: OK for the response code. This custom error page in the CloudFront distribution is analogous to the Error Document on the S3 bucket (and will work on IE, too). When done, click Create.