DEV Community

Cover image for Page Not Found Error on Netlify Reactjs React Router solved
Rajesh Royal
Rajesh Royal

Posted on • Originally published at rajeshroyal.com on

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
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.

netlify site not found error react router
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 netlify page not found spa error solved
redirects file content

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

solved netlify error video
Netlify successfully redirected to the SPA routes

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

Resources

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

Discussion (54)

Collapse
mellim profile image
Mel Lim • Edited on

Thanks for this, Rajesh! You definitely put me on the right track. I found the _redirects file didn't seem to like working with my netlify.toml, which I was already using to redirect API calls to my backend. I found this sample code to add to my netlify.toml file in the Netlify documentation:

[COMMENT] The following redirect is intended for use with most SPAs that handle routing internally.

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Link to documentation here: docs.netlify.com/configure-builds/...

Tip: scroll through the sample file that is provided or use find on your browser as it is kind of lost in a sea of other sample code.

Collapse
rajeshroyal profile image
Rajesh Royal Author

Thanks @mellim
This detailed comment is definitely going to help somebody.

Collapse
ariiie_arie profile image
Arieee

I tried this and still did not work

Collapse
rajeshroyal profile image
Rajesh Royal Author

Maybe you missed any config or having some other issue with project. please provide more information so people from comments can also help. Thanks.

Collapse
anabeatrizzz profile image
Ana Beatriz

For me too.

Collapse
felipekafuri profile image
Felipe Ramos Kafuri

Thanks thats saved me haha

Collapse
rajeshroyal profile image
Rajesh Royal Author

you're welcome 😀

Collapse
kizito007 profile image
Kizito Nwaka

Thanks 🙏

Collapse
mehmetcanaygun profile image
Can

Thank you! That was what I needed.

Collapse
sahla profile image
Sahl Khalifa

Thank you. Simple & effective

Collapse
devcoder profile image
devcoder

life saver!, thanks for this, i spent days researching this issue and was about to give up

Collapse
zaqar profile image
Za-Qar

This is very helpful, thank you!

Collapse
dhruvindev profile image
Dhruvin • Edited on

very helpful

Collapse
zubisofts profile image
Anyanwu Nzubechi Godswill

Wow! Thanks a lot man!

Collapse
kmanadkat profile image
Krupesh Anadkat

Thanks man :)

Collapse
rajeshroyal profile image
Rajesh Royal Author

you're welcome 😀

Collapse
hamzaaouni profile image
Hamza-Aouni

Arigato !!

Collapse
matcs06 profile image
Mateus Costa Silva

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

Collapse
nutlope profile image
Hassan El Mghari

You are a live saver my man

Collapse
animeshsinghweb profile image
Animesh Singh

Thanks! Worked awesome.
I had missed the note to add _redirects to public/ folder. Fixed and good!

Collapse
guimaraesmiguel profile image
Miguel Guimaraes

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

Collapse
mrisrael profile image
MrIsrael

Thanks a lot, man!

Collapse
jonatasoc profile image
Jonatas de Oliveira Coêlho

Hey, Rajesh! You helped me a lot! Thank you very much!

Collapse
melindacardenas profile image
Melinda Cardenas

this worked for me! thank you :-)

Collapse
roxanaflorea profile image
Roxana F

You are a life saver!!! Thanks from the bottom of my heart <3

Collapse
rajeshroyal profile image
Rajesh Royal Author

Your welcome sir 😉

Collapse
jarodsim profile image
Jarod Mateus de Sousa Cavalcante

love u

Collapse
javila35 profile image
Joe Avila

You are doing god's work

Collapse
rajeshroyal profile image
Rajesh Royal Author

heheheh 😄

Collapse
hecthorl profile image
hector vargas

thanks a lot man

Collapse
codeclassifiers profile image
codeclassifiers

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

Collapse
matta profile image
mohamed atta

Thanks man 🙏🙏🙏

Collapse
gtalinn profile image
Aruj

Thanks for this concise solution. It saved me quite a lot of time!

Collapse
olney1 profile image
Ben

I have been looking everywhere for a solution thank you!

Collapse
as_e7946ce3c83 profile image
Adam Sheridan

You sir are a life saver! Thank you!!!

Collapse
lucasfrazier profile image
Lucas Frazier

Thank you. This solved my problem.

Collapse
mrpaulishaili profile image
Paul C. Ishaili

This is really helpful! Permission to share on my dev page