- Newest
- Most votes
- Most comments
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:
- Go to your AWS Amplify Console.
- Navigate to your app's settings.
- Find the "Rewrites and Redirects" section.
- 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
Relevant content
asked 2 years ago
asked 2 years ago
asked 2 years ago
- AWS OFFICIALUpdated 10 months ago
- AWS OFFICIALUpdated 4 years ago
- AWS OFFICIALUpdated 5 years ago
