DEV Community

Cover image for How to fix Page Not Found on netlify
Kapil Pandey
Kapil Pandey

Posted on

How to fix Page Not Found on 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
Enter fullscreen mode Exit fullscreen mode
  • Push your code and redeploy

Cheers πŸ₯‚ you fixed the broken link!

Top comments (17)

piyush profile image
Piyush Suthar

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]

Enter fullscreen mode Exit fullscreen mode
nitsuah profile image

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

hemant profile image
Hemant Joshi

Life-saving Post
Thank You

kapi1 profile image
Kapil Pandey

Glad to be of help!

thatjsdev profile image
Nishant Mendiratta

Worked like a charm, thank you.

avanikadarji profile image

Thank you!! your solution solved my issue.

mzaini30 profile image

You can using server configuration:

olusegunadex profile image

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.


myshuker profile image

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

kuzzzzz profile image

Thanks this worked like magic

yogeshdatir profile image
Yogesh Datir


ineeader profile image
Inee Ader 🐌

This fixed it! Thank you!

ytrkptl profile image
Yatrik Patel

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.

femil profile image
Femil Savaliya

Thank you so much🀟

kahramanx profile image
Mustafa Kahraman

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

tanvibhakta_ profile image
Tanvi Bhakta

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.

trailblazer007 profile image
Fatoye Oluwaseun

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