如何在React中实现React Router哈希URL模式？

架构老林

2026-5-27

如何在React Router中启用哈希URL模式

嘿，作为React新手，想要切换到哈希模式其实超简单！React Router专门提供了对应的组件来实现这个需求，我一步步给你讲清楚：

第一步：确保安装了React Router
如果还没安装react-router-dom，先通过包管理器安装：
```
npm install react-router-dom
# 或者用yarn
yarn add react-router-dom
```

第二步：用HashRouter替代BrowserRouter
React Router默认的BrowserRouter会生成不带#的路径（比如/list），而HashRouter会自动在URL中添加#前缀，完美匹配你想要的#/list格式。

举个代码示例，原来的路由配置可能是这样的：

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import ListPage from './pages/ListPage';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/list" element={<ListPage />} />
        {/* 其他路由规则 */}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

只需要把BrowserRouter替换成HashRouter就行：

import { HashRouter, Routes, Route } from 'react-router-dom';
import ListPage from './pages/ListPage';

function App() {
  return (
    <HashRouter>
      <Routes>
        <Route path="/list" element={<ListPage />} />
        {/* 其他路由规则 */}
      </Routes>
    </HashRouter>
  );
}

export default App;