Fix Page not Found Error for React Router on Netlify App

Were you trying to deploy a live React App on Netlify and you ran into a “Page not found” error while navigating to inner pages in your routes.

The error often looks like this;

Why do we see this error?

React Router handles routing on the client-side (browser) so when you visit a non-root page (e.g. https://yoursite.netlify.com/else), Netlify (server-side) does not know how to handle the route, because your roots are set up on the root level.

How to fix this issue:

From your editor, you can add a special “_redirect” file to your root directory with the following content;

Netlify’s documentation has a section, History Pushstate and Single Page Apps, which shows you how to redirect to the root of your SPA URL (but doesn’t mention React Router, as it applies to other client-side frameworks/libraries).

This file, when added to your codebase lets Netlify handle URLs that are not handled on the client-side.

For more ways & restrictions for redirect, check out the official Netlify documentation.

See more guides here…