react router doesn't work in aws s3 bucket
amazon-s3, amazon-web-services, javascript, reactjs
Solution
Update 1 May 2020:
Since this post is quite active, I need to update the answer:
So you have a few options to solve the issue:
- You can put index.html in the Error document box (like Alan Friedman suggested).
- Go to your bucket (the one that actually has the code - not the one you use to redirect) -> Properties -> Static website hosting:
- This is not "hacky" but it works because of the way `react-router` works: It handles the requests from the front-end and routes users to other routes but overall, the React app is a single-page application.
- If you want server-side React, consider using Next.js.
You can put a designated error file error.html in the public folder of your React app and in the Static website hosting: Error document box, put in: error.html. This also works. I've tested it.
Use AWS CloudFront > CloudFront Distributions > The distribution of your bucket > Error Pages and add the error code you want. If you don't use `react-router` (like the example below), the bucket will respond with Error 403 so you can respond with your error.html.
- For `TypeScript`, currently `react-router` doesn't support it so you should consider option 2 and 3. They're going to update the library in future version `6.*` according to this thread.
Problem
I deployed my React website `build/` folder into an AWS S3 bucket. If I go to `www.mywebsite.com`, it works and if I click on `a` tag to go to Project and About pages, it leads me to the right page. However, if I copy and send the page url or go straight to the link like: `www.mywebsite.com/projects`, it returns 404. Here's my `App.js` code: ``` const App = () => ( <Router> <div> <NavBar/> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/projects" component={Projects}/> <Route exact path="/about" component={About}/> <Route component={NoMatch}/> </Switch> </div> </Router> ); ```