React项目从HashRouter切换为BrowserRouter的Webpack配置咨询

你遇到的这个问题很典型——当把HashRouter换成BrowserRouter后，刷新页面或者直接访问子路由时出现Cannot get错误，本质是因为BrowserRouter依赖HTML5的History API，这时候浏览器会直接向服务器请求对应路径的资源，但服务器上并没有这些文件（所有路由都是React在客户端处理的），所以需要让服务器把所有路由请求都指向项目的index.html，让React Router来处理路由逻辑。

下面分开发环境和生产环境给你具体的配置方案：

开发环境：修改Webpack DevServer配置 #

在你的Webpack配置文件里，找到devServer配置项（如果没有就新增），添加historyApiFallback配置：

const path = require('path');
const webpack = require('webpack');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');

module.exports = {
  // 你的其他配置（entry、output等）...
  devServer: {
    // 核心配置：让DevServer在找不到对应资源时返回index.html
    historyApiFallback: true,
    // 如果你的项目部署在子目录（比如http://localhost:3000/my-app/），需要指定index的路径：
    // historyApiFallback: {
    //   index: '/my-app/index.html'
    // }
  },
  plugins: [
    new CaseSensitivePathsPlugin(),
    // 你的其他插件...
  ]
};

这个配置的作用是：当DevServer收到一个不存在的资源请求时，会自动返回项目根目录下的index.html，这样React Router就能正常解析路由了。

生产环境：配置服务器重写规则 #

开发环境搞定后，生产环境部署到真实服务器时，同样需要做类似配置，不同服务器的配置方式略有不同：

Nginx配置 #

在你的Nginx站点配置里，添加如下规则：

location / {
  try_files $uri $uri/ /index.html;
}

这条规则会让Nginx先尝试找请求的文件或目录，如果找不到，就返回index.html。

Apache配置 #

在项目根目录创建.htaccess文件，添加以下内容：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

它的作用和Nginx的规则类似，把所有非文件/非目录的请求重定向到index.html。

额外注意事项 #

• 如果你的Webpack配置里设置了output.publicPath，要确保它和你的部署路径一致。比如部署在根目录就设为'/'，部署在子目录就设为'/your-sub-path/'。
• 确认你的index.html里的资源引用路径是相对路径或者和publicPath匹配的，避免出现资源加载失败的问题。

内容的提问来源于stack exchange，提问作者Nicolas Albarracin