如何修改React Router配置将带#的哈希路由改为无#的常规路径

你当前使用的是哈希路由模式（HashRouter），切换为浏览器历史路由模式（BrowserRouter）即可实现无#的常规路径，具体操作如下：

1. 替换根路由组件 #

找到项目入口文件（通常为src/main.jsx/src/index.js/src/App.jsx），修改路由根组件引入和使用逻辑：

• 原哈希路由写法：

// 引入组件
import { HashRouter, Routes, Route } from 'react-router-dom'
import Login from './components/Login'
import Contact from './components/Contact'
import Home from './components/Home'

// 路由注册
ReactDOM.createRoot(document.getElementById('root')).render(
  <HashRouter>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/home" element={<Home />} />
    </Routes>
  </HashRouter>
)

• 替换为历史路由写法：

// 仅修改引入的根组件名称，其余路由规则完全不变
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Login from './components/Login'
import Contact from './components/Contact'
import Home from './components/Home'

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/home" element={<Home />} />
    </Routes>
  </BrowserRouter>
)

2. 生产环境服务端配置 #

BrowserRouter依赖HTML5 History API实现，直接访问二级路径（如/login）时需要服务端配置重定向规则，否则会出现404错误，常见服务端配置如下：

• Nginx 配置
  在nginx配置文件的server块中添加如下规则：

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]

注意事项 #

如果项目部署在域名二级目录下（如https://www.example.com/myapp/），需要给BrowserRouter添加basename属性：

<BrowserRouter basename="/myapp">
  {/* 其余路由规则不变 */}
</BrowserRouter>

本地开发环境（Vite/Create React App默认脚手架）无需额外配置，直接启动即可生效。

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