如何解决react-router-dom刷新报错及URL去除#号问题

问题原因 #

使用BrowserRouter后URL的#号消失，但刷新页面时浏览器会直接向服务器请求对应路径（如/graphs），而服务器未配置该路径的路由，因此返回Cannot GET /xxx错误。这是因为BrowserRouter依赖HTML5 History API，前端路由需要服务器配合将所有请求指向React应用的入口文件index.html。

第一步：确保正确使用BrowserRouter #

修改index.js，明确导入并使用BrowserRouter：

// index.js
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>,
  document.getElementById("app")
);

开发环境解决方法 #

方案1：Create React App（CRA）项目 #

• 方法一：在项目根目录的public文件夹下创建_redirects文件，写入：

  /* /index.html 200
  

• 方法二：在package.json中添加homepage字段：

  "homepage": ".",
  

修改后重启开发服务器即可。

方案2：webpack-dev-server项目 #

在webpack配置文件（如webpack.config.js）中添加devServer配置：

module.exports = {
  // ...其他配置项
  devServer: {
    historyApiFallback: true, // 所有请求都返回index.html
  }
};

重启webpack-dev-server生效。

生产环境解决方法 #

根据部署的服务器类型配置：

Nginx #

修改Nginx配置文件，添加try_files指令：

server {
  listen 80;
  server_name 你的域名或IP;
  root /你的React项目build文件夹路径;
  index index.html;

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

配置完成后重启Nginx。

Apache #

在build文件夹下创建.htaccess文件，写入：

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

其他服务器 #

核心逻辑一致：让服务器将所有路由请求转发到React应用的index.html，由前端路由处理页面跳转。

额外注意 #

确保你的Root组件中渲染了<Outlet />（来自react-router-dom），否则嵌套的子路由（如/graphs）内容无法显示：

// Root.jsx
import { Outlet } from 'react-router-dom';

function Root({ onLogout }) {
  return (
    <div>
      {/* 你的导航栏等公共组件 */}
      <button onClick={onLogout}>退出登录</button>
      <Outlet /> {/* 子路由内容会在这里渲染 */}
    </div>
  );
}

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