How can I statically serve a react app that has routes in it?

Question

I have a website that runs Express on the backend, where I define an api and serve my build directory. My app looks like this:

function App() {
    return (
        <BrowserRouter>
                <Route path="/" component={Home} exact />
                <Route path="/explore" component={Explore} exact />
        </BrowserRouter>
    );
}

I would like to be able to drop the build directory into an S3 bucket then have my API requests to a hardcoded location.

The problem is, when I open up index.html, my and components don't render. What are some possible solutions?

This is a duplicate of https://stackoverflow.com/questions/51218979/react-router-doesnt-work-in-aws-s3-bucket — Anthony Garcia-Labiad, Jul 27 '20 at 17:07

score 1 · Answer 1 · answered Jul 27 '20 at 17:11

This is a common pitfall of client-side routing, the navigation will work when started from the index, but fail when the users refresh or start their session from another page (for example by clicking on a link).

This is because there won't be any /explore page, since the whole app is bundled in one index.html file.

To make it work you have to configure S3 to serve index.html when it does not find the requested page, by setting index.html as the Error document as explained in this answer.

k-wasilewski · Answer 2 · 2020-07-27T17:13:16.583

0

Try to use a HashRouter instead, like this:

import { HashRouter } from 'react-router-dom';

function App() {
    return (
        <HashRouter>
            //your Routes here
        </HashRouter>
    );
}

edited Jul 27 '20 at 17:13

answered Jul 27 '20 at 16:48

k-wasilewski

3,943
4
12
29

Do you mind posting an example of the `HashRouter`? It would make this a better answer. – DᴀʀᴛʜVᴀᴅᴇʀ Jul 27 '20 at 16:50

score 0 · Answer 3 · answered Jul 27 '20 at 22:34

0

In the S3 Management Console, under Static website hosting, set the error page to be the index.html.

answered Jul 27 '20 at 22:34

Bryn

49
6

How can I statically serve a react app that has routes in it?

3 Answers3