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.
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
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
HashRouter, as few folks found this solved their routing issues.