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> );
As you may or may not already know, it's super simple to host a static website from an AWS S3 bucket. It's fast, cheap, and you can even use a custom domain. This makes it a great candidate for hosting React single-page applications!
Setup a S3 BucketOn AWS Console, search for “S3” and go to S3 Dashboard. Click on “Create bucket” and give the bucket a name such as “my-react-app-2021” (or anything else you wish). Note: The bucket name has to be unique across whole of S3.
The primary difference between them lies in their usage. React Router DOM is for web applications and React Router Native is for mobile applications made with React Native.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With