react-router-dom@4.2.2中BrowserRouter无法导航多段URL路径求助

我之前也碰到过完全一样的问题，给你理清楚原因和具体的解决办法：

为什么HashRouter正常但BrowserRouter不行？ #

• BrowserRouter的依赖特性：它基于HTML5的History API工作，当你直接访问/foo/bar这类多段路径时，浏览器会向服务器发起请求，试图找到对应路径的物理文件。如果服务器没有配置重定向规则，就会返回404，导致前端路由无法接管页面。
• HashRouter的特殊处理：它把路由信息放在URL的#后缀部分（比如/#/foo/bar），这部分内容不会被服务器解析，所有请求都会指向根目录的index.html，所以不管路径多深都能正常触发前端路由。

具体解决方案 #

1. 开发环境（Webpack） #

在Webpack的开发服务器配置里添加historyApiFallback: true，让所有找不到资源的请求自动重定向到index.html，交给前端路由处理：

// webpack.dev.js 或对应的配置文件
module.exports = {
  // ...其他配置项
  devServer: {
    historyApiFallback: true,
    // 其他开发服务器配置，比如端口、热重载
    port: 3000,
    hot: true
  }
};

2. 生产部署环境 #

根据你使用的服务器，添加对应的重定向规则：

Nginx配置

在站点配置的根路径下添加try_files指令：

server {
  // ...其他服务器配置
  location / {
    try_files $uri $uri/ /index.html;
  }
}

Apache配置

在项目根目录创建.htaccess文件，写入以下重写规则：

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

3. 额外确认Route配置 #

虽然你换HashRouter就正常，但还是建议检查下Route的写法是否正确，比如：

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/dashboard/settings" component={Settings} />
    <Route path="/user/:id" component={UserDetail} />
  </Switch>
</Router>

注意exact属性只在需要精确匹配根路径时使用，不要给所有Route都添加，否则子路径会匹配失败。

总结 #

这个问题本质不是react-router的bug，而是BrowserRouter需要服务器端配合，让所有请求都指向前端的入口文件。按照上面的配置修改后，你用BrowserRouter也能正常访问多段路径的路由了。

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