Page Not Found Error on Netlify Reactjs React Router solved
Tags: react, reactrouter, javascript, netlify
Published: 2020-07-14 10:10:26

---
cover_image: https://rajeshroyal.com/wp-content/uploads/2020/06/netlify-page-not-found-error-react-router-after-deploy.png
title: Page Not Found Error on Netlify Reactjs React Router solved
published: true
date: 2020-06-04 13:49:41 UTC
tags: reactjs, reactrouter, javascript, netlify
canonical_url: https://rajeshroyal.com/page-not-found-error-on-netlify-reactjs-react-router-solved/
---

So you made a Single Page Application and It’s working great on localhost npm or yarn server. And now you made a build of this site and deploy it to the [Netlify](https://www.netlify.com/).

nooo… I got an error.

> **Page Not Found**
> 
> Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.

Many might run into the following error after deploying a single page React site using React Router to **Netlify**.

![netlify page not found error react router after deploy](https://rajeshroyal.com/wp-content/uploads/2020/06/netlify-page-not-found-error-react-router-after-deploy.png)<figcaption id="caption-attachment-1226">Netlify page not found error react-router after deploy</figcaption>

 

## How did the error occur?

> React Router handles routing on the client-side (browser) so when you visit the non-root page (e.g. `https://yoursite.netlify.com/login`), Netlify (server-side) does not know how to handle the route.  
> _(As your routes are set up in the root level)._

And the error occurring on Netlify when you go to `https://<netlify domain>/route` directly.

![netlify site not found error react router](https://rajeshroyal.com/wp-content/uploads/2020/06/netlify-site-not-found-error-react-router.gif)<figcaption id="caption-attachment-1238">Page Not Found Demo Netlify</figcaption>

 

## How can we fix it?

Netlify offers a special file, [\_redirects](https://www.netlify.com/docs/redirects/), which you can add to your codebase and let Netlify handle the URL that is not handled on the client-side.

_Netlify documentation has a section,_ [_History Pushstate and Single Page Apps_](https://www.netlify.com/docs/redirects/#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)._

So to fix the issue, we need to create a file named `_redirects` to the root of our site [public folder of App] with the following content.

`/* /index.html 200`

[View file on github](https://github.com/Rajesh-Royal/React-Js-Todo-App-with-firebase-auth/blob/master/public/_redirects)

![redirects file content netlify page not found spa error solved](https://rajeshroyal.com/wp-content/uploads/2020/06/redirects-file-content-netlify-page-not-found-spa-error-solved.jpg)<figcaption id="caption-attachment-1231">redirects file content</figcaption>

Here is the working example site: [React Todo App with firebase Authentication](https://reacttodoappfirebaseauth.netlify.app).

![solved netlify error video](https://rajeshroyal.com/wp-content/uploads/2020/06/solved-netlify-error-video.gif)<figcaption id="caption-attachment-1237">Netlify successfully redirected to the SPA routes</figcaption>

 

_For more ways & restrictions for redirect, check out_ [_the official Netlify documentation_](https://www.netlify.com/docs/redirects/)_._

## Resources

- Where I found out the answer –  on [Sung Codes](https://sung.codes/).
- [\_redirects Netlify documentation](https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps) for SPA.
- [Source code](https://github.com/Rajesh-Royal/React-Js-Todo-App-with-firebase-auth) with `_redirects` file.
- [Netlify site](https://reacttodoappfirebaseauth.netlify.app/) with \_redirects file.

The post [Page Not Found Error on Netlify Reactjs React Router solved](https://rajeshroyal.com/page-not-found-error-on-netlify-reactjs-react-router-solved/) appeared first on [Rajesh Royal](https://rajeshroyal.com).