hashrouter如何使用react
HashRouter 的基本概念
HashRouter 是 React Router 提供的一种路由方式，基于 URL 的哈希部分（即 # 后面的内容）实现路由切换。适用于静态网站或不支持服务器配置的场景，因为哈希部分的变化不会触发页面刷新。
安装 React Router
确保项目中已安装 react-router-dom，若未安装，可通过以下命令安装：
npm install react-router-dom使用 HashRouter 的步骤
在项目入口文件（如 index.js 或 App.js）中引入 HashRouter 并包裹根组件：
import { HashRouter, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
return (
<HashRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</HashRouter>
);
}路由跳转与导航
使用 Link 组件实现导航，避免页面刷新：
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}获取路由参数
通过 useParams 或 useLocation 获取动态路由参数或当前路由信息：
import { useParams, useLocation } from 'react-router-dom';
function UserPage() {
const { id } = useParams(); // 获取如 /user/:id 的参数
const location = useLocation(); // 获取当前路由信息
return <div>User ID: {id}</div>;
}配置动态路由
在 Route 中定义动态路径参数：
<Route path="/user/:id" element={<UserPage />} />注意事项
- 哈希路由的局限性：URL 中会包含
#，可能影响 SEO 或美观性。 - 服务器兼容性：无需服务器额外配置，适合静态托管（如 GitHub Pages）。
- 嵌套路由：嵌套路由的路径会基于父路径自动拼接。
通过以上步骤，可以快速在 React 项目中集成 HashRouter 实现客户端路由功能。
