AWS hosted (s3, cloudfront) static react website does not route to sub page when the url entered from browser

Question

I have hosted a static react website on aws and use s3 , cloudfront . It has several subpages.

<Link to='/about'>about us</Link>
<Link to='/projects'>projects</Link>
<Link to='/stats'>statistics</Link>
<Link to='/contact'>contact</Link>

When you entered to home page from browser and select one of these subpage's button it will successfully redirect to sub page.

but when you entered the url directly ( www.example.com/about ) in browser it wont redirect to the subpage and gives this error ie "This XML file does not appear to have any style information associated with it. The document tree is shown below."

I did check on developer tools and saw that when you click on the "about" button request header is like this

:path: /static/js/6.gc48fd92.chunk.js
referer: https://www.example.com/about

but when you entered the url in browser directly ie ( www.example.com/about ), the request header is like this

:path: /about

and "referer" is not there.

Am i missing something here? Is there a way to redirect to static js page when you entered the subpage's url in browser?

Thanks in advance.

Answer 1

You need to set up Cloudfront so that when the user directly navigates to the page, CloudFront doesn't send back an error because it can't find a file for that page (this is the XML error you get), but instead passes that request onto / so React can take over.

https://gist.github.com/bradwestfall/b5b0e450015dbc9b4e56e5f398df48ff#spa

The gist of this is you tell CloudFront that on any 404 error, redirect to the root page and return a 200 to the user.

Answer 2

I have fixed it by doing this.

react router doesn't work in aws s3 bucket

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/functions-tutorial.html

Hope this helps