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!

70

I still experience the same issue. did all the stuff above to try and fix the issue but still.

https://resonant-cat-43f175.netlify.app

71

Hi @d41,

Thanks for reaching out!

I believe the issue may be with your build settings. Looks like you have a monorepo, and will want to set the Base directory to vite-project and add a build command such as npm run build.

Additionally, you’ll want to correct this line your package.json.

72

Hi Melvin,

Thanks for the response. So for my understanding, I have to change the highlighted line in my package.json to “package.json”?

73

And now with the pointer you gave me is the build failing. See screenshot attached. Im new to this, so I have no idea how to figure this out.

image
image871×501 58.9 KB

74

Okay, after deleting the package-lock and node module file and running npm i again it finally worked. But now my site is blanco???

75

Hi, @d41. It looks like the site has been deleted.

76

im on mobile that means i cant use the website to install the app that uses netlify

77

Can you elaborate on what exactly you are trying to do @idkwhatnamehere

78

Not sure what you mean here. Can you clarify? Are you trying to access our platform from your mobile?