当前位置：首页 > React

hashrouter如何使用react

2026-02-11 19:01:18React

HashRouter 的基本概念

HashRouter 是 React Router 提供的一种路由方式，它使用 URL 的哈希部分（即 # 后面的内容）来实现路由切换。这种方式不需要服务器端配置，适合静态网站或无法控制服务器配置的场景。

安装 React Router

在项目中使用 HashRouter 前，需要安装 react-router-dom 包。可以通过 npm 或 yarn 安装：

npm install react-router-dom

或

yarn add react-router-dom

引入 HashRouter

在项目的入口文件（通常是 index.js 或 App.js）中引入 HashRouter：

hashrouter如何使用react

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

包裹应用组件

将应用的根组件包裹在 HashRouter 中，确保路由功能在整个应用中可用：

import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <HashRouter>
    <App />
  </HashRouter>,
  document.getElementById('root')
);

定义路由

在应用组件中，使用 Route 组件定义具体的路由规则。例如：

import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
}

导航链接

使用 Link 或 NavLink 组件在页面中创建导航链接：

hashrouter如何使用react

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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

动态路由参数

可以通过 :param 语法定义动态路由参数，并在组件中通过 useParams 钩子获取参数值：

import { Route } from 'react-router-dom';
import User from './User';

function App() {
  return (
    <Route path="/user/:id" component={User} />
  );
}

在 User 组件中获取参数：

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

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

编程式导航

通过 useHistory 钩子实现编程式导航：

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

function Button() {
  const history = useHistory();
  return (
    <button onClick={() => history.push('/about')}>
      Go to About
    </button>
  );
}