Configuring NGINX to work with React Router

When using the BrowserRouter that’s provided by React Router, you’ll find that if you’re navigating within the site to the various URLs, they will work. However if you bookmarked one of those URLs, or refreshed the browser on a URL, it will return a 404.

If you’re using Webpack’s devserver, then you can get around it with a setting in the webpack.config.js file:

devServer: {
  // your other webserver settings
  historyApiFallback: true
}

This setting makes webpack aware of the historyApi that is used by React Router and essentially just redirects any unknown URLs back to the root.