1

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 i.e. "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 i.e. (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.

General Grievance
  • 4,555
  • 31
  • 31
  • 45
John Stuart
  • 950
  • 5
  • 11
  • 28

2 Answers2

0

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.

chedabob
  • 5,835
  • 2
  • 24
  • 44
  • hi @chedabob , I have setup cloudfront and set and set Default Root Object: index.html. So the home page working fine. But the problem is only for subpages. When i put this url (www.example.com/about) in browser it gives above error. But from home page when i navigate to about (from navigation bar) this is working fine. – John Stuart Apr 05 '21 at 14:10
  • Ok ill try that, but setting up error page is optional right ? – John Stuart Apr 05 '21 at 14:12
  • It's required for React apps that handle their own routing. – chedabob Apr 05 '21 at 14:14
  • nope, i have setup error page: as index.html , but no success :( – John Stuart Apr 05 '21 at 14:26
0

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

agusvazquez
  • 46
  • 6