AWS Amplify ReactJS app trouble reloading page

user_15021947 0
Viewed 1022

I'm currently working on a full-stack project mainly using ReactJS and AWS Amplify. I've successfully deployed the website but the URL routings only seem to work if I redirect from the home page. I can only load the home page www.website.com but I try to manually type in www.website.com/login/, it gives me this message

<Error>
  <Code>AccessDenied</Code>

  <Message>Access Denied</Message>

  <RequestId>B2173BDEE0658858</RequestId>

  <HostId>
  TRevHdaqGZYTUxU9W1wXc3CQccfLeznHlYLcbuF+Wr511FVmOPFBp4tpyccJ2t5QMVpvYygNNb4=
  </HostId>
</Error>

I've looked up solutions from other StackOverflow pages but it didn't seem to solve the issue.

I have tried adding a redirect rule in the AWS console provided (Getting 403 ACCESS DENIED error when deploying React Web app on AWS Amplify) but the issue persists. Is there a way to fix this?

aws-amplify reactjs amazon-web-services
1 Answers

You have to set up a 404 (page not found) redirect on the AWS Amplify to point on the index.html.

React App is SPA (Single Page App) it has its own routing, and on the AWS side, all other routes except base path will return 404, because they don't exist on the server-side.

Once you setup 404 to points on your React application again, React router will handle the routing.

Check: docs.aws.amazon.com/amplify/latest/userguide/redirects.html and pay attention to 404 redirections.

enter image description here

user_51562620
Related