hashrouter如何使用react
HashRouter 的基本使用
在 React 中使用 HashRouter 需要从 react-router-dom 库中导入它。HashRouter 使用 URL 的哈希部分（即 # 后面的内容）来实现路由，适合静态网站或不需要服务器配置的场景。
安装 react-router-dom：
npm install react-router-dom在应用中引入并包裹根组件：
import { HashRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Router>
);
}路由配置与导航
HashRouter 的路由配置与其他路由器（如 BrowserRouter）类似。可以通过 <Route> 定义路径和组件的映射关系，用 <Link> 或 <NavLink> 实现导航。
定义路由组件：
function Home() {
return <h1>Home Page</h1>;
}
function About() {
return <h1>About Page</h1>;
}使用 NavLink 实现高亮导航：
import { NavLink } from 'react-router-dom';
function Navigation() {
return (
<nav>
<NavLink exact to="/" activeClassName="active">Home</NavLink>
<NavLink to="/about" activeClassName="active">About</NavLink>
</nav>
);
}动态路由与参数传递
HashRouter 支持动态路由参数，通过 :param 语法定义，并通过 useParams 钩子获取参数。
定义动态路由：
<Route path="/user/:id" component={User} />在组件中获取参数：
import { useParams } from 'react-router-dom';
function User() {
const { id } = useParams();
return <h1>User ID: {id}</h1>;
}编程式导航
通过 useHistory 钩子实现编程式导航，例如在表单提交后跳转页面。
使用 useHistory：
import { useHistory } from 'react-router-dom';
function Login() {
const history = useHistory();
const handleLogin = () => {
history.push('/dashboard');
};
return <button onClick={handleLogin}>Login</button>;
}嵌套路由
HashRouter 支持嵌套路由，通过子 <Route> 实现层级结构。
嵌套路由配置：
<Route path="/products" component={Products}>
<Route path="/products/:category" component={Category} />
</Route>重定向与 404 处理
使用 <Redirect> 实现重定向，通过通配符 * 处理未匹配的路由。
重定向示例：
import { Redirect } from 'react-router-dom';
<Route path="/old-path">
<Redirect to="/new-path" />
</Route>处理 404 页面：
<Route path="*" component={NotFound} />注意事项
HashRouter的 URL 中会包含#，例如http://example.com/#/about。- 哈希路由不需要服务器配置，适合静态托管（如 GitHub Pages）。
- 如果需要干净的 URL（无
#），应使用BrowserRouter并配置服务器支持。
