当前位置：首页 > React

react实现hash路由

2026-01-26 19:18:59React

使用 `react-router-dom` 实现 Hash 路由

React 中可以通过 react-router-dom 库实现 Hash 路由。Hash 路由的特点是 URL 中包含 #，适合不支持 HTML5 History API 的环境。

安装依赖：

react实现hash路由

npm install react-router-dom

基本实现代码

创建一个简单的 Hash 路由示例：

import { HashRouter as Router, Route, Link, Routes } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

路由参数传递

可以通过 useParams 获取 Hash 路由中的参数：

react实现hash路由

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

// 在路由配置中添加
<Route path="/user/:id" element={<User />} />

编程式导航

使用 useNavigate 实现编程式导航：

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/dashboard')}>
      Login
    </button>
  );
}

嵌套路由

Hash 路由同样支持嵌套路由：

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
  </Route>
</Routes>