You just deployed your first Create React App to Netlify. Site is liveshows up in the scrolling deployment log. Success 🎉

You happily visit your new site and click around the relative links. Nice, React Router has been putting in the work. Everything looks great.

You enter a path in the address bar that you know is handled with React Router… and get hit with “Page Not Found”. Huh?

Convinced that you must’ve done something wrong, you spin up your app in your local dev environment and try to replicate the bug. But the routing is perfectly fine locally. It even works for the production version: npm run build and serve -s build. So what’s the problem here?

Routing in Single-Page Applications

If you used Create React App (CRA) and React Router, your site is most likely a single-page application (SPA).

As opposed to traditional multi-page applications, SPAs only maintain one HTML file, commonly index.html. Instead of serving a different HTML file for each path, SPAs depend on client-side routing. With almost 3 million weekly downloads, React Router is a popular client-side routing library.

In the simplest terms, React Router connects a path to a component. When the path is hit, React Router inserts the associated elements into the DOM tree, all without a page refresh.

However, for this process to work, the HTTP GET requests must only ever retrieve data from index.html — all the React Router logic is handled here. This means the server must direct all requests to index.html.

So why does this work locally? This is where Webpack comes in.

#react #javascript