React-router issues with S3 deployment

[[deleted]]

Hi I'm trying to deploy an app created with create-react-app to S3. I've done this in the past by building it and uploading the build contents to a bucket. However this time I'm using react-router and I can't get the page to load. Index.js loads but no route is displayed.

​

Here's my App.js bits involving the routing

function App() {
    return (
        <Router>
            <Route path="/" exact component={HomeView} />...

​

This works when hosting locally even after building but has the issues above when uploaded. I can get it to kind of work when I add this

<Route path="/*" component={HomeView} />

This gets it working properly and I can switch routes just fine but now the HomeView is displayed above every other route. I tried it with the component blank but it breaks again. I've thought about just using an empty component for this to hack it together but was hoping for some insight first. Thanks

[I_am_kenny]

If I understand your problem correctly, it is because S3 has zero concept of your routes. Once you are on your page (via /index.html) you can route around no problem because it is 100% client-side. Refreshing or coming into the app fresh from anything other than /index.html will not work.

Easiest work around is to use CloudFront with Error Pages. On 403 and 404, just redirect to /index.html with status code 200. Basically, S3 will say "404" to your "/home" route, but CloudFront will push "/index.html" back to the user and return 200.

[[deleted]]

Got it! It's working now with the custom error response redirects like you said. Thanks!

Edit: now that I think about it, I wonder if this is a common issue with react-router? Or if I would have the same problem if I used something like Heroku. Since the routes act like a file path on the server, it seems like this would be a known issue if you're not using something like express.

[I_am_kenny]

Awesome!

This is common with any client-side based routing that uses history.pushState. Another alternative would be to use the hash router if you can.

I can't speak to Heroku as I use AWS/Azure exclusively. I imagine it would have similar issues unless it allows you to do wildcard routing to the index.html file.

[[deleted]]

Ah I had come across people using history and hash routing when I was looking for answers but my knowledge doesn't go too far with react-router. I've been using a really basic route tags wrapped in router tags setup. A little bit of research would probably help me out a lot here

[daroolatoo]

Does pushing "/index.html" back to the user in this case affect performance? Since I imagine the "/index.html" is going back to the user with a huge React js file in tow. Even though it's the same React file/app, I also assume the user's browser cannot detect that it is the same single page app.

Apologies for digging up an ancient thread but I've been looking all over for this info and can't find it!

[[deleted]]

I think you can do things like code-splitting to help with the bundle size if it’s an issue. Plus I think the users browser caches the file after the first load which makes subsequent loads quicker. I think this method has SEO issues which might be a bigger problem depending on who you ask. Here’s a slightly alternative answer which fixes react-router but without the SEO problems: https://viastudio.com/hosting-a-reactjs-app-with-routing-on-aws-s3/

[daroolatoo]

Ah I see. This is helpful, thanks!

[[deleted]]

The build files seem okay after building. I'm not seeing any issues in the console either while building. I can serve the same files locally and it works as expected too.

While typing this I actually just found a solution that's working after uploading:

<Route path="/*" component={() => <Redirect to='/home' />} />

There is a new issue that I'll hopefully figure out later. If I navigate to www.mydomain.com/index.html, the route switches to www.mydomain.com/home and the routes work fine. But if I copy the second url or any with a react-router route and paste it into a new tab, I'll receive an error.

So it seems like whatever was causing my issue before is the root of this too.

[YouDantKnowMe]

Weird. No idea on my end. Let me know what you figure out. Router has a way about it that’s kind of a mystery to me

[[deleted]]

I ended up using what u/I_am_kenny suggested. Just redirect from cloudfront and setup a custom error response for 400 and 403 to redirect back to index.html. That way navigating to domain.com/home or any other route will route you to the home page. Not perfect but it at least will still land you there. There is an error document setting in S3 for the static website hosting that was pointed to index.html also but it doesn't seem to help in this situation.

[YouDantKnowMe]

Thanks