0
646
Viewsreact router doesn't work in aws s3 bucket
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>
);
3 answers
Answer question0
I'm not sure if you have already solved it. I had the same issue.
It's because AWS S3 is looking for that folder (projects) to serve from, which you don't have.
Simply point Error document to index.html.
This worked for me. You can handle error pages in react-router.
0
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-routerworks: 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, currentlyreact-routerdoesn't support it so you should consider option 2 and 3. They're going to update the library in future version6.*according to this thread.
0
In case this S3 bucket is served from a CloudFront distribution:
Create a custom error page (AWS Docs) in CloudFront distribution that routes 404 errors to index.html and returns 200 response code. This way your application will handle the routing.
Custom Error Pages
