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.

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

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.

Page Not Found Demo Netlify

How can we fix it?

Netlify offers a special file, _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, 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

redirects file content

Here is the working example site: React Todo App with firebase Authentication.

Netlify successfully redirected to the SPA routes

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

Resources

• Where I found out the answer – on Sung Codes.
• _redirects Netlify documentation for SPA.
• Source code with _redirects file.
• Netlify site with _redirects file.

The post Page Not Found Error on Netlify Reactjs React Router solved appeared first on Rajesh Royal.

Comments

[Felipe Ramos Kafuri]

Thanks thats saved me haha

[Rajesh Royal]

you're welcome 😀

[Krupesh Anadkat]

Thanks man :)

[Rajesh Royal]

you're welcome 😀

[Jarod Mateus de Sousa Cavalcante]

love u

[MrIsrael]

Thanks a lot, man!

[osama]

Thanks man <3

[codeclassifiers]

Thank you so much for this fix. This is a really useful tip.

[Miguel Guimaraes]

I had the same issue and it worked for me. Thank you man!

[Hassan El Mghari]

You are a live saver my man

[Mateus Costa Silva]

You saved me!! Thank you so much!!!

[Hamza-Aouni]

Arigato !!