How to handle the refresh in production build using react-router

Question

I have an app that's using react router. I have already set up my dev environment to use it and I don't have the problem when I want to refresh the page, or the server do it itself, but when i make a production build. If any user use the refresh button in the app, it will have a 404 error.

I know in the server (my prod build will be in an ISS srv), the route made by react router what the app is trying to access doesn't exist, so how can I fix that problem?
what do I need to do and how to do it?
I'm pretty new on this.

Thanks for your time and help!

Answer 1

I will try to explain how react router manages your state of you Application.

Say u have following router

<Router>
   <Route to="/" component={Home}>
     <Route to ="/about" component={About} />
    </Route>
<Router>

Say you are on home page of your application, which would be /. Now say yoy navigate to /about url using Link on your home page. This would be served by your react router. So things work fine.

Now say at this point of time when you are at /about route you refresh the page. Now the web-browser like any page request(irrespective of whether its a single page application or not) would send a request to your backend server to get page. So you need to have routes configured in backend for the first page load.

Now you must be compiling your react components maybe using webpack and getting a bundle output right? This you put in your html file ? Now for all routes serve this html file only.

As you have your compiled JS file, when page renders on react-router renders the page automatically.

Now for configuring routes there are multiple ways to do it. One of them an be add all routes in the backend which render same html file with compiled javascript containing your react code. Another can be use something like nginx and return the html from there only.

Answer 2

For your production setup, you'll need your ISS server set up so all incoming URL requests will return the index.html file. I'm not sure how this would be done in ISS, but in something like Apache, you'd use URL rewrites.

The reason why you want to always return your index.html is because index.html is essentially your react app and the react-router component will handle the routing and render what is necessary based on the URL.

You would only not rewrite URLs that point to your static assets (css/js/pngs/etc. files). For convenience, you would probably want to make all your static files available under a, for example, /static/ URL of your site.

So, you'd want your server configured so that (* being a wildcard):

/static/* returns whatever static resource is requested in the URL

/* returns your index.html page

The reason why you don't worry about this when running in your dev environment is because webpack-dev-server is configured to do this all for you.