How to avoid 404 error when reload a page in react?

JavaScript
1

I have deploy my react app but the problem is whenever I reload my component page … it start giving 404 error !!
any suggestions??

2

Could we please have a link to the app and the code?

3

http://www.khannburger.com/

5

I assume you’re using react router? You are trying to go to a page that doesn’t exist. You need to adjust your settings on the server so that errors are redirected to whatever the index page is (index.html I assume). eg, I’m assuming there’s no HTML page Login.html. It’s just the client side router changing the address in the browser url history to give the impression you’re switching HTML pages rather than just loading components. If you refresh on that, then the browser will try to load an HTML page and fall over because it doesn’t exist, so you need to tell the server to just redirect back to index.html if that happens (a which point it should work fine because the client side router will then load the correct component)

6

How can I redirect back to index.html ?? I’m using shared hosting where I’ve cPanel …
So I’m confused that how can I redirect to main index.html page??

7

I don’t know, you’d have to Google for your hosting. So for example on AWS I tick a checkbox then add an entry in a list underneath that checkbox for each error I want to handle. There will be something very simple you need to adjust, and it’s a common need so what you need to adjust should be easy to find; you have to do this with anything using client-side routing, otherwise the app using it will break if you try to refresh or navigate directly to a route defined in the app.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.