When you navigate through React Router, two things happen:

1. The React app updates the DOM with the content for the route you specified
2. The browser history is updated with a URL which, in theory, points to that route

The idea is that when you a page from scratch, you have to load the React application from the server, but when you navigate from page to page, it is all handled client-side (except perhaps for API calls to get data).

Your problem is that you haven't done anything to make the server support that route so when the first page a browser loads (including refreshing or opening a link in a new window) isn't the homepage, you hit a 404 error instead.

There are a few basic approaches to doing that.

The quick and dirty approach

Configure your server so that any request for a route which should be handled by the React Router serves up the HTML document which bootstraps your HTML document.

Currently you only have (probably) the path / serve up that document.

This has a couple of disadvantages:

• URLs which should be 404 errors will probably get pointed at your React application's HTML document and end up as 200 OK pages.
• It isn't very search engine friendly
• There's no fallback to useful content if JS fails for any reason (such as a loss of network half way through loading a page, or corporate firewall mistaking the JS for something potentially harmful).

While I don't recommend this approach, here is a question about how to configure Apache HTTPD to do this. Other HTTP servers will need configurations specific to them.

The slightly less dirty approach

You can avoid having the URLs for your routes pointing to different paths on the server by changing the fragment identifier in the URL instead of the path.

This is done by using <HashRouter> instead of <BrowserRouter>.

Hashbangs were the approach used by SPAs before the introduction of pushState and friends by browsers.

This avoids breaking 404 errors.

Generate specific HTML documents for each route at build time

You produce a version of the React bootstraping document tailored for each route.

This is the approach used by Gatsby which makes it pretty easy.

Generate specific HTML documents for each route on demand

This does the same thing, but rather then creating a big file of static HTML documents which all have to be replaced when you do updates, you generate the documents with a fairly traditional server side approach.

Next.js takes this approach and, again, makes it quite easy. You need more specialist hosting than you do for simple static files though.