MENU

Refreshing Or Direct Navigation

If you don't want to manage the routing of all the URLs at your server, you can either use <HashRouter> (see the previous page), or configure your dev server and your production host to fall back to your app's single HTML page for any path it doesn't otherwise recognize.

For a webpack-based dev server, that looks like this:

devServer: {
  historyApiFallback: true,
  static: "./",
  hot: true,
}

devServer: {
  historyApiFallback: true,
  static: "./",
  hot: true,
}

Vite's dev server (react-router's own current baseline tooling) enables an equivalent SPA fallback automatically, so there's usually nothing to configure there. In production, apply the same idea at the hosting layer: a plain static file host or CDN (including the S3/CloudFront style of hosting used to serve this very site) needs a rewrite rule that serves your index.html for any path that doesn't match a real file, instead of returning its own 404 page.