React中使用react-router-dom v6移除URL中的#符号

你当前URL里的#是因为用了HashRouter组件，换成BrowserRouter就能实现无#的URL格式，具体操作如下：

1. 替换路由根组件 #

打开项目中包裹路由的入口文件（通常是src/index.js或src/App.js），将导入的HashRouter替换为BrowserRouter，同时更新组件包裹结构：

// 原代码
import { HashRouter as Router, Routes, Route } from 'react-router-dom';

// 修改后
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 保持Router包裹路由的逻辑不变
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        {/* 其他路由配置 */}
      </Routes>
    </Router>
  );
}

2. 服务器端配置（部署时必须做） #

BrowserRouter依赖HTML5 History API，部署到服务器后直接刷新非根路径（比如{url}/dashboard）会返回404，需要配置服务器让所有请求都指向项目的index.html：

• Create React App 部署：
  • 在package.json中设置"homepage": "/"（部署到域名根目录），如果是子目录则填写对应路径（比如"/my-theme/"）
  • 使用serve工具部署时，执行命令：serve -s build（-s参数用于配置单页应用路由）
• Nginx 配置：
  在server块中添加如下规则：

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

• Express 服务器配置：
  添加中间件处理所有请求：

  const path = require('path');
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
  });
  

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