Problem when navigating routing

I just deployed my react webapp unto netlify, it works great but there is one problem where in my page I got several buttons that navigate to another page. However, when I click that button rather than sending me to that page, it says Page not found even though I can tell that the link I want to go to exists since I use navigate in another place on my webapp as well to the same link and that button works. One reason that I could think of is for that specific button, after I click it, the page reloads which might cause the problem I mentioned before, so is there anyway of allowing me to access links even after reloading.

Ps. Lets say the website’s domain is www.example.com, I want to go to www.example.com/test
image

This issue is commonly encountered when deploying single-page applications (SPAs) like React on Netlify. The problem arises because when you navigate to a different route in your application, Netlify tries to serve a file that matches that route. However, in SPAs, all routes are handled by a single index.html file.

To fix this, you need to add a _redirects file to your project with the following content:

/*  /index.html  200

This rule tells Netlify to redirect all routes to the index.html file, which then allows your React router to handle the route correctly.

You should place the _redirects file in the public folder of your React application. After adding the file, you need to redeploy your application on Netlify.

Please take a look at the support guide below as it details this error in greater detail.

You can find more information about redirects in the Netlify documentation.

If you’re using react-router-dom, you might also need to switch from BrowserRouter to HashRouter, as few folks found this solved their routing issues.