Broken link in my reactjs hosted from netlify

Viewed 1357

I recently hosted in Netlify through github and my website which is rendered from reactjs. My website link is https://realhomes.netlify.com/ . So when i try to reload my website from other page except from home(index page) it shows broken link and i don't know how to fix it. Please help.

3 Answers

It looks like you're using react-router within your site to route between different pages. If that's the case, you'll need to tell Netlify to serve the index.html file for everything, not just the root of the site.

From this netlify blog post

If you choose to use something for routing (like React Router for example), you will need to set up a redirect and rewrite rule for the single page app.

Try adding /* /index.html 200 to a _redirects file in your publish directory or the following to your netlify.toml.

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Read the docs here

In the public folder create _redirects file and add /* /index.html 200, now your app will not crash on refresh.

If someone wants to know how the netlify.toml file looks like you can find it in my github repository in Link Here and it works.

Related