当前位置：首页 > React

hashrouter如何使用react

2026-01-15 10:09:25React

使用 HashRouter 在 React 中的方法

安装 react-router-dom
确保项目中已安装 react-router-dom，若未安装，可通过以下命令安装：

npm install react-router-dom

导入 HashRouter 和相关组件
在项目的入口文件（如 index.js 或 App.js）中导入 HashRouter 以及路由相关组件：

hashrouter如何使用react

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

配置路由结构
在组件中包裹 HashRouter，并定义路由规则。以下是一个基本示例：

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

创建路由对应的组件
定义路由中使用的组件（如 Home 和 About）：

hashrouter如何使用react

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

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

注意事项

URL 中的哈希符号
HashRouter 会在 URL 中添加 #（如 http://example.com/#/about），适用于静态部署或无法配置服务器的情况。
与 BrowserRouter 的区别
BrowserRouter 使用干净的 URL（如 /about），但需要服务器支持；HashRouter 无需服务器额外配置。
导航组件
使用 Link 替代 <a> 标签实现无刷新导航，NavLink 可添加活动状态样式。

动态路由与参数传递

通过 :param 定义动态路由，并通过 useParams 获取参数：

<Route path="/user/:id" element={<UserProfile />} />

// UserProfile 组件
function UserProfile() {
  const { id } = useParams();
  return <p>User ID: {id}</p>;
}

嵌套路由

通过 <Outlet> 实现嵌套路由结构：

<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />} />
</Route>

// Dashboard 组件需包含 Outlet
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}