Search code examples
htmlcssreactjsnetlify

Broken link in my reactjs hosted from netlify


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.


Solution

  • 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