Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react 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> ); 
like image 639
Viet Avatar asked Jul 07 '18 00:07

Viet


People also ask

Does React Router work in S3?

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!

Can you deploy React on S3?

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.

Why use React Router dom instead of React Router?

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.


1 Answers

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.

enter image description here

This worked for me. You can handle error pages in react-router.

like image 178
A.R Naseef Avatar answered Oct 07 '22 07:10

A.R Naseef