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 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.
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.
Ran into a similar issue where everything works in local host but on the live netlify hosted site, certain endpoints when page is refreshed, we get that 404 error. The netly.toml file looked correct but after a whole day of trying different things it turns out that the netlify file wasn’t in the root folder as it was accidentally created i. the src folder and when everything is expanded in vs code, our human eyes really couldn’t tell. After moving the netlify.toml file to the root folder, that fixed the issue so for anyone else encountering this issue, do check if it really is in the root folder.
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
After trying many different solutions this simple change worked for me , changed from BrowserRouter to HashRouter and it works now.
thanks for sharing this insight with the community