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 并配置服务器支持。