React Router fails on Digital Ocean

Question

I have a website made with React running on Digital Ocean with pm2 and NGINX. The entry point "/" loads just fine but when I try to go to the "/:username" route I just get 404 Not Found. My routes are defined in App.jsx as follows:

<Switch>
     <Route
            exact path='/'
            render={
              routeProps => <Front {...routeProps} />
            }
          />
          <Route
            path='/:username'
            render={
              routeProps => <Profile handleSignOut={ this.handleSignOut } {...routeProps} />
            }
          />
        </Switch>

index.js has the following code:

ReactDOM.render(<BrowserRouter>
                  <App />
                </BrowserRouter>,
                 document.getElementById('root')
 )

The routes all work as expected when running locally with npm run start.

Biolysis

You need to make sure that your server serves the index.html file for all your routes so that React Router can take care of the routing in the browser. – Disadvantaged

Answer 1

For react App hosted on app Platform on Digital Ocean.

Luckily now, you can now enable it through the UI. Please follow the steps below and it should be resolved.

Using Cloud panel UI: Log in and click on App > Settings >> click on component name > scroll down to Custom page > Edit Custom page and select Catchall > Enter index.html in the page name block > Save

Cheers,Arinze Hills

Leoleod

This looks like an odd solution but it does work! For everybody else who is suspicious - checkout the next answer which gives some insights why this solution does work for SPAs. – Lycia

Answer 2

This is a very common problem for single page apps written in different frameworks like React or Angular.

The problem, though, is irrelevant to the frameworks. It rather lies in the mechanism that is the in-browser routing. It is actually not a real routing. When you open a single page app, a simple index.html file is served, and when you navigate away inside the app, the framework takes care of rendering a new page and faking a navigation event (so that it will be recorded in the browser history and the url is changed).

But when you arrive on a subadress, like 'myapp.com/some-page', this will mke the server try and serve an actual directory called 'myapp.com/some-page', not your index.html file, which you obviously need to run the app, and, as this directory does not exist, it will throw a 404 error.

To fix this, you need to reconfigure your server, so that in case of a 404 error, instead of failing, it returns your index.html file; this way your code will be loaded and the underlying framework will handle the routing to display the correct page.

Mccloud

Answer 3

In addition to @amem nice explanation, add the following line to your web server configuration file:

For NGINX add error_page 404 /index.html;

For Apache add ErrorDocument 404 /index.html to your .htaccess

Unnecessarily