I have a mock shop React application with a few different routes which works as expected on localhost. When deployed (both on Surge and Render) the subdirectories/links do not work.
My 404 page does not load too.
The funny bit is when I access a route from a link in the app it loads ok – for example a details page for an item. When I paste the very same url into a different tab or even refresh the current one, I get 404 again. I noticed that the actual http request in the second instance is not sent to my back end (vinyl-shop.onrender.com) but to the front end app (vinylarium.onrender.com):
The “good” request to my back end:
Request from the same url being sent to the front end instead after request is resent with refresh/F5
I have the same problem with /orders page where users are supposed to be seeing their order history, with /admin and basically with the whole app. Requests are not being sent where they are supposed to and I have no clue why.
The app is deployed here and here. You can log in as [email protected] with password “1234” to test it yourself.
I can paste some code of course but think the problem is more conceptual than technical.
The whole app code could be found here anyway.
It goes without saying that locally everything works fine.
Any help will be greatly appreciated.
I managed to resolve the problem on my Render deployment.
I read the top-rated answer of this question which I found extremely helpful to explain what is going on between the front end and back end when client side rendering is concerned.
One of the answers further down advised to have check the create-react-app deployment documentation.
I did this and, quite simply, had to do this:
Hopefully this will help people facing similar issues.