Skip to content

DEV Community

Kapil Pandey

Posted on Jul 19, 2020

How to fix Page Not Found on netlify

#webdev #react #github #netlify

Since you are reading this, you surely might have came across the same error as shown in the cover image.

I'm not sure if other static site servers/platforms are all like that, but if you deploy SPA to Netlify you can only navigate from index.html to other pages using Links.Once you refresh or type a URL directly in the address bar you'll get 404.

Why does this error occur?

If your SPA is build with React then React Router handles routing on the client side (browser) when you visit internal page (e.g. http://localhost:3000/about) but once you host your SPA on Netlify (server-side) the routing logic has to be modified because Netlify does not know how to handle the route.

How to fix the issue?

As per the doc, you need to create a file named _redirects in the root folder.You can go to the link mentioned above to know more about it.I'll directly show how to fix it:

Create a file named _redirects without any extension inside public folder.
Copy paste the below content in the file

/*    /index.html   200

Push your code and redeploy

Cheers 🥂 you fixed the broken link!

Top comments (18)

Subscribe

Piyush Suthar • Jul 19 '20

And if you want to host a react app on any Cpanel or shared hosting, then adding .htaccess file will be super useful.

<IfModule mod_rewrite.c>

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]

</IfModule>

nitsuah • May 10 '22

I created an account here just to tell you that you are awesome.

Hemant Joshi • Jul 19 '20

Life-saving Post
Thank You

Kapil Pandey • Jul 19 '20

Glad to be of help!

Inee Ader 🐌 • Mar 4 '21

This fixed it! Thank you!

Avanika • Mar 24 '21

Thank you!! your solution solved my issue.

Zen • Jul 19 '20

You can using server configuration: router.vuejs.org/guide/essentials/...

olusegunadex • May 26 '22

Easy fix;

In your root directory, create a _redirects file;

Add this;

/* /index.html 200
This should fix the issue for React apps hosted on Netlify.

Source: devsntechies.com/fix-page-not-foun...

Yogesh Datir • Oct 21 '21

Thanks...

Nishant Mendiratta • Jan 23 '21

Worked like a charm, thank you.

Yatrik Patel • Dec 27 '20

I’ve ran into this issue before and didn’t exactly know what to do. I guess I’ll try this out and see. Thanks.

Myshuker • Oct 28 '20

thanks ...your solution solved my issue...THANKS

kuzzzzz • Oct 26 '20

Thanks this worked like magic

Femil Savaliya • Mar 22 '22

Thank you so much🤟

Mustafa Kahraman • Aug 13 '21

i make a project just used html, css and js but i tried this way, its not work

Tanvi Bhakta • Jan 14 '22

This will fix your issue only if you are using React and React-Router (or other routing library ?).

If you are facing this issue with a website built on a different stack, there is probably a different cause.

Fatoye Oluwaseun • Aug 19 '22

Thanks, I tried this and it worked for me too!

View full discussion (18 comments)

The most important JavaScript discussions happen on DEV

React vs Signals: 10 Years Later

☝️ Ryan Carniato and Dan Abramov take a look back at React!

Read next

Linkshare - a GitHub Pages template to store links and share them on social media

Christian Heilmann - Mar 14

HOW TO USE CHATGPT ON VSCODE

umaola - Mar 17

Deep dive into How Web Browsers work (with illustrations) ⚙️🚀

Tapajyoti Bose - Mar 19

React: Lessons from the Trenches - useEffect x Infinity

Peter Shershov - Mar 23