当前位置：首页 > React

react实现history路由

2026-01-27 07:13:49React

React 中实现 History 路由

使用 react-router-dom 的 BrowserRouter 或 Router 组件可以实现基于浏览器 History API 的路由。这种方式无需在 URL 中添加 #，而是直接操作浏览器的历史记录栈。

安装依赖：

npm install react-router-dom

基本配置

在项目入口文件（如 App.js）中引入 BrowserRouter 并配置路由：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

自定义 History 对象

如果需要自定义 history 对象（例如在 Redux 中同步路由状态），可以使用 createBrowserHistory：

import { createBrowserHistory } from 'history';
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom';

const history = createBrowserHistory();

function App() {
  return (
    <HistoryRouter history={history}>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </HistoryRouter>
  );
}

编程式导航

通过 useNavigate Hook 或 history 对象实现页面跳转：

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

function Home() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate('/about')}>
      跳转到 About
    </button>
  );
}

动态路由与参数

通过 useParams 获取动态路由参数：

react实现history路由

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

// User 组件内
import { useParams } from 'react-router-dom';
function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}