Site cannot be accessed broken link or url that doesn't exist

Support
63

Please share your site name, @Ebony4991.

64

I build my portfolio on react it works good on local host but on netlify only the main page works, when I try to redirect to “About” page it says link broken or doesn’t exist. what can I do? this is the URL to my website

https://navisasabeti.nl/

65

Hi @navisasabeti10,

Thanks for reaching out!

The issue you described, where only the main page works and navigating to the “About” page results in a broken link or a page that doesn’t exist, is likely related to how client-side routing is handled in your React application.

When you use client-side routing in a React application, the routing is typically handled by JavaScript on the client side. However, when a user navigates directly to a specific URL, the server needs to be configured to serve the same index.html file for all routes.

To set up a redirect for a single-page application (SPA) on Netlify, you can use a rewrite rule to serve the index.html file regardless of the URL the browser requests. You can configure this rule using either a _redirects file or a netlify.toml file.

In the _redirects file, add the following line:

/* /index.html 200

Alternatively, you can use the netlify.toml file to configure the redirect:

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

Let us know if you have any questions.

66

I have same issue. I can only see my Home page. I can’t see other pages.
Here is my url.

67

Your website appears to work @Chucks. Please describe the issue.

68

Picturdd
Picturdd1920×1080 206 KB

https://andrewss-portfolio.netlify.app/contact

this is the link to my website portfolio. i’m getting this error from my contactform

69

Hi @drew58,

Thanks for reaching out and welcome to the Netlify Support Forums!

Could you try adding the either of the following:

To set up a redirect for a single-page application (SPA) on Netlify, you can use a rewrite rule to serve the index.html file regardless of the URL the browser requests. You can configure this rule using either a _redirects file or a netlify.toml file.

In the _redirects file, add the following line:

/* /index.html 200

Alternatively, you can use the netlify.toml file to configure the redirect:

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

Let us know if you continue to have issues after adding either the _redirect file or the netlify.toml. Thanks!