DEV Community

loading...
Cover image for How to fix Page Not Found on netlify

How to fix Page Not Found on netlify

Kapil Pandey
0.1+0.2==0.3 ๐Ÿค”false Sounds weird but it's absolutely correct & that's what I deal with #engineer ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป
ใƒป1 min read

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!

Discussion (11)

Collapse
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]

</IfModule>
Enter fullscreen mode Exit fullscreen mode
Collapse
avanikadarji profile image
Avanika

Thank you!! your solution solved my issue.

Collapse
ineeader profile image
Inee Ader ๐ŸŒ

This fixed it! Thank you!

Collapse
thatjsdev profile image
Nishant Mendiratta

Worked like a charm, thank you.

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

Collapse
myshuker profile image
Myshuker

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

Collapse
kuzzzzz profile image
kuzzzzz

Thanks this worked like magic

Collapse
gbengaoyetade profile image
Gbenga Oyetade • Edited

This was really helpful. Thanks a lot for writing and making it short.

Collapse
hemant profile image
Hemant Joshi ๐Ÿ˜ผ

Life-saving Post
Thank You

Collapse
kapi1 profile image
Kapil Pandey Author

Glad to be of help!

Collapse
mzaini30 profile image
Zen

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