loading...
Cover image for Page Not Found Error on Netlify Reactjs React Router solved

Page Not Found Error on Netlify Reactjs React Router solved

rajeshroyal profile image Rajesh Royal Originally published at rajeshroyal.com on ・3 min read

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

Posted on by:

rajeshroyal profile

Rajesh Royal

@rajeshroyal

Designer, Front-end Developer, Traveller, Hooper. I design and code beautifully simple things, and I love what I do. fin

Discussion

markdown guide