Handling React Routing in Production

This guide shows how to solve a page not found error you've in a React app that uses React Router or the HTML5 history API.

Oct 6, 2020 • 4 Minute Read

Subscribe to the newsletter

Introduction

If you're reading this, there is a high probability that you've deployed your first React app that uses React Router or the HTML5 history API, and routes entered into the browser directly return a page not found error. In this guide, you'll gain understanding of what the cause of this problem is and how to solve it.

Building a Sample App

To replicate the problem, you'll build and deploy a simple React app with two pages. First, create your React development environment with Create React App by entering the following command in your terminal.

      npx create-react-app [YOUR_APP_NAME]

Next add react-router-dom as a dependency

      yarn add react-router-dom

Adding Routes

Create a Routes.js file and add the following to create the home and about page routes.

          import React from 'react'
import { Route,Switch, BrowserRouter as Router } from 'react-router-dom'
import { Home, About } from './app.js';

const Routes = () => { 
    return (
     <Router>
				<Switch>
						<Route exact path='/' component={Home}/>
						<Route exact path='/about' component={About}/>
				<Switch/>
		 </Router>
		);
};

export default Routes;
    

Now create the components for the Home and About pages using the code below.

          import React from 'react';

const Home = () => {
	return(
		<p>Homepage</p>
	);
}

const About = () => {
	return(
		<p>About</p>
	);
}

export default {Home , About}
    

Don't forget to add the routes component to your index.js page

          import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";

ReactDOM.render(
    <React.StrictMode>
            <Routes />
    </React.StrictMode>,
    document.getElementById("root")
);
    

Deploy Your App

There are a lot of ways to deploy your React app. In this guide you'll use render.com. But before deployment, run your build script and push your production build to a GitHub repository. Next, visit render.com and create an account if you don't have one.

Follow these steps to deploy your app:

Add a new web service on your render.com dashboard.
Connect your repo to the web service you just created.
Deploy your app

Visit the About page. It doesn't work because in production the server looks for the file /about, which literally doesn't exist.

Fixing the Issue

To fix this issue, the server needs to be configured such that requests to any route would be served the index.html file in your production build. If you use express.js it can be done as follows.

          app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', function(req,res) {
		res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
    

In your case render.com has a simple solution for that. On the dashboard for your app, click the Redirects/Rewrites tab and add the following:

          # Source: /*
# Destination: /index.html
# Action: Rewrite
    

Now save the changes and deploy your app again just to be sure. Your routes should work perfectly now.

Conclusion

Voila! You're a React guru now. If you'd like to read more on routing for Create React App in production, visit the official documentation. Ping me on Twitter if you'd like to chat more at @DesmondNyamador.