Question

Why don't React-router URLs work when refreshing or writing manually?

"I'm having trouble with React-router URLs. When I try to refresh the page or manually type in a URL in the address bar, the page doesn't load correctly. It just shows a blank page or an error. I don't understand why this is happening because everything works fine when I navigate through the app normally. Can someone help me figure out why the URLs aren't working when I refresh or write them manually?"

Answer 1

Below is a just and complete account of how this effect obtains:

1. Client-Side Routing vs Server-Side Routing:

React Router does client-side routing. This means that, even on changing (or "navigating") routes, there is no page refresh involved. React Router is actually a JavaScript-based framework that uses appropriate components to respond to the URL route.

So far as refreshing or directly typing the URL is concerned, the browser will send an HTTP request to the server to retrieve a resource tied to that address. No problems arise while on the application level, in which the client with React Router is assumed to handle the route. At the same time, the server does not know about it.

2. The Problem:

When a URL is entered manually, or the refresh button is pressed, a request is sent to the specific URL on the server.

For example:

Within a route like /profile, the URL is http://localhost:3000/profile, and when refreshed or typed in directly, the request goes to the server for /profile.

This would be a 404 on your server if it is not set up to serve React Router routes (it doesn't serve index.html for all URLs), as the server does not understand any physical path like /profile in connection with how it knows about static files such as index.html, about.html, etc.