Fix Netlify Page Not Found Error on React Router App

 

In this article we will discuss on how we can fix a Netlify error where we get page not found error on routes that are handled on client side by React Router.


Okay then, you have a single page application writter in React that you deployed on Netlify. Everything is working fine. And you randomly decide to visit a non-root route directly by enter the path on your address bar of you site.

And boom you get an error.

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

This is because React Router handles routing on client side and Netlify or the backend wont have any implementation on how to handle the route. And that's what it throws an error of 404.


Fix Netlify Page Not Found Error on React Router App

So, to fix this you will need to create a small file of Netlify. So that it can understand what to do in such cases.

  1. Goto public folder on root level in your  React project.
  2. Create a new file named "_redirects" inside public folder.
  3. Write the below line in _redirects file.

    /* /index.html 200

  4. Save, Push, Build, Deploy and you are done.

If you want to dig deeper into _redirects file you might want to check out Netlify documentation.

Netlify Docs for _redirects

    1 Comments

    1. Consequently, our geeks are accessible here to investigate client obstacles and give them unexpected assistance. Allow us to perceive what should be possible when 404 worker blunders face while working a significant work and this issue endures our business.
      err_too_many_redirects chrome

      ReplyDelete
    Previous Post Next Post