DEV Community

loading...
Cover image for Page Not Found on Netlify with React Router

Page Not Found on Netlify with React Router

dance2die profile image Sung M. Kim Originally published at slightedgecoder.com on ・3 min read

                                Photo by Hello I’m Nik on Unsplash


If you are already using netlify.toml, check out this article,


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

Page Not Found

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

Error message on Netlify

How did the error occur?

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

                                (As your routes are set up in the root level).

Error Code & Demo

Here is the simplest code using React Router.

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

Page Not Found Demo

How can we fix it?

Netlify offers a special file, _redirects, which you can add to your code base and let Netlify handle how to 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 your site with following content.

_redirect static file

                                Change index.html accordingly to match the SPA root.

Here is the working site.

Netlify successfully redirected to the SPA root

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

Resources

The post Page Not Found on Netlify with React Router appeared first on Sung's Technical Blog.

Discussion (16)

pic
Editor guide
Collapse
zhuangya profile image
zhuangya

awesome! you save my day :)

Collapse
dance2die profile image
Sung M. Kim Author

You're welcome & glad that it's saved someone's day (an exactly the purpose of sharing 🙂)

Collapse
halimarm profile image
Halim

if you use feature deploy on netlify

npm run build && echo "/* /index.html 200" > build/_redirects

Collapse
imichaelowolabi profile image
Michael Owolabi

Once again, the community came to the rescue. Thank you Sung, the article saved me stress

Collapse
dance2die profile image
Sung M. Kim Author

Glad that it helped :)

Collapse
calba5141114 profile image
Carlos Alba

Thanks my dude!

Collapse
dance2die profile image
Sung M. Kim Author

You're welcome ✋

Collapse
m121 profile image
Mateo Perez Salazar

Thanks a lot, it was so helpul

Collapse
danalves24com profile image
Daniel Rosel

Thanks man this really helped me

Collapse
hemant profile image
Hemant Joshi 😼

Wow, you saved my life been looking for this since a week and finally found

Collapse
dance2die profile image
Sung M. Kim Author

Thanks for letting me know it's still working well :)
and glad that it has helped

Collapse
danieldourado profile image
Daniel Dourado Fernandes

My man Sung M. Kim. Thank you.

Collapse
ebereplenty profile image
NJOKU SAMSON EBERE

Thank you. Just fixed mine!

Collapse
dance2die profile image
Sung M. Kim Author

You're welcome, Njoku~

Collapse
zikeron profile image
Alejandro Cortez

I tried to follow this tutorial but my project didn't work. Any ideas?

Collapse
dance2die profile image
Sung M. Kim Author

Hi Alejandro.

Would you post source/links/context/error messages etc to check out for me and others?