Skip to content

Redirection issue in AWS amplify

0

I am currently deployed a amplify app using react + vite. I am able to open https://domain.com in aws amplify but if I navigate from https://domain.com and click on button I am able to navigate to https://domain.com/page1 but https://domain.com/page1 shows 404 when refreshed.

asked a year ago541 views

1 Answer
0

This issue you're experiencing with AWS Amplify is common for single-page applications (SPAs) like those built with React and Vite. The problem occurs because Amplify's default behavior is to look for a file that matches the requested path, which doesn't exist for client-side routed pages.

To resolve this, you need to configure Amplify to properly handle client-side routing. Here's how you can fix it:

  1. Go to your AWS Amplify Console.
  2. Navigate to your app's settings.
  3. Find the "Rewrites and Redirects" section.
  4. Add a new rule with the following configuration:
  • Source: <*>
  • Target: /index.html
  • Type: 200 (Rewrite)

This rule tells Amplify to serve your index.html file for all routes, allowing your React router to handle the routing on the client side.

After adding this rule, deploy your changes. Your app should now work correctly, allowing you to refresh on any route without encountering a 404 error.

If you're still experiencing issues after implementing this solution, double-check your React router configuration to ensure it's set up correctly for your routes.

Remember to clear your browser cache or try in an incognito window after making these changes, as cached responses might interfere with testing the new configuration.
Sources
I getting the 301 issue while deploy my code in the aws amplify | AWS re:Post
AWS Amplify redirect from/to custom domain | AWS re:Post

answered a year ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.