React redux routing with hot reloading does not work with refresh

Question

I have the following routes defined

<Route path='/' component={App}>
        <IndexRoute component={LoginContainer} />
        <Route path='landing' component={LandingComponent} />
        <Route path='login' component={LoginContainer} />
    </Route>

Now when the user clicks a login button on the loginContainer he is directed to the landing page (from the routes /landing). So now the url changes to http://server:port/landing

Now if I modify a file and save with hot module reloading (web pack dev server) I get an error saying cannot get http://server:port/landing. This is true because there is no such page, how do I fix this problem.

I am using react-router, react-router-redux, and webpack dev server.

Answer 1

You need to enable historyApiFallback in your webpack dev server config.

This will redirect to the index page on a 404 and consequently allow the router to kick in to find your subroute.

For more info for why this is necessary, or some other, more indepth wy around it, see this answer.