BrowserRouter无法通过带参数URL正常打开页面的问题

这问题我之前在项目里切换路由模式时也踩过坑，核心原因是HashRouter和BrowserRouter的工作机制完全不同，导致直接访问带参数的URL时服务器无法正确返回入口文件，进而React Router没法接管路由渲染。

为什么HashRouter没问题，BrowserRouter不行？ #

• HashRouter依赖URL中的#后面的片段（比如/#/details/12345），服务器只会解析#之前的路径（也就是/），所以不管#后面是什么，服务器都会返回你的index.html，React Router就能正常解析#后的路由参数并渲染Details组件。
• 而BrowserRouter使用的是真实的URL路径（比如/details/12345），当你直接访问这个地址时，服务器会尝试去查找服务器上是否存在/details/12345这个物理文件或目录——但你的项目里根本没有这个路径对应的文件，服务器就会返回404，React代码都没加载，自然无法渲染Details组件。

针对不同场景的解决方案 #

1. 开发环境（用webpack-dev-server或Create React App）

如果你是用Create React App开发，或者自己配置了webpack-dev-server，只需要开启historyApiFallback配置：

• Create React App：不需要额外配置，CRA的dev server默认已经开启了这个功能；如果是build之后测试，记得用serve -s build命令启动（需要先安装serve：npm install -g serve），-s参数就是让服务器把所有路由请求转发到index.html。
• 自定义webpack配置：在webpack.config.js的devServer里添加：

  devServer: {
    historyApiFallback: true, // 关键配置
    open: true,
    port: 8080,
    // 其他配置...
  }
  

2. 生产环境部署（比如Nginx、Apache）

以Nginx为例，需要修改配置文件，让所有请求都先尝试访问对应文件，找不到就返回index.html：

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/build/folder;

  location / {
    try_files $uri $uri/ /index.html; # 核心规则
  }
}

如果是Apache，需要在.htaccess文件中添加：

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

最后注意点 #

切换到BrowserRouter后，访问URL时要去掉#，正确的访问地址应该是http://localhost:8080/details/12345，而不是带#的旧路径。

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