React 第三十五节 Router 中useNavigate 的作用及用途详解

前言

useNavigate 是 React Router v6 中引入的一个钩子函数，用于编程式导航。它替代了旧版本（v5及以下）中的 useHistory，提供了更简洁的 API 来实现页面跳转、历史记录操作（如前进/后退）等功能。

一、useNavigate 的核心功能

导航到指定路径（类似 <Link to> 的编程式实现）。
替换当前历史记录（不留下当前页面的访问痕迹）。
前进或后退指定步数（如返回上一页）。
传递状态（state）或查询参数（如跳转时携带数据）。

二、useNavigate 基本用法

1. 安装与配置

确保已安装 React Router v6：

npm install react-router-dom@6

2. 基本导航

在函数组件中调用 useNavigate，返回 navigate 函数：

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

function HomePage() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/about')}>
      跳转到关于页
    </button>
  );
}

三、useNavigate常见使用场景

1. 路径跳转

// 跳转到指定路径
navigate('/about');

// 携带查询参数（URL参数）
navigate('/user?name=John&age=25');

// 使用对象形式配置路径
navigate({
  pathname: '/user',
  search: '?name=John',
  hash: '#details',
});

2. 替换当前页面

// 跳转并替换历史记录（无法返回上一页）
navigate('/login', { replace: true });

3. 前进/后退

// 返回上一页
navigate(-1);

// 前进一页
navigate(1);

4. 传递状态（State）

// 跳转时传递数据（不暴露在 URL 中）
navigate('/user/123', {
  state: { from: 'home', timestamp: Date.now() }
});

// 目标组件中通过 useLocation 接收
const location = useLocation();
console.log(location.state); // { from: 'home', ... }

四、useNavigate 完整案例代码

项目结构
bash
src/
├── App.jsx
├── Home.jsx
├── About.jsx
└── UserDetail.jsx

1. 路由配置（App.jsx）

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/user/:id" element={<UserDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

2. 首页组件（Home.jsx）

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

function Home() {
  const navigate = useNavigate();

  const handleViewUser = () => {
    // 跳转到用户详情页，传递 ID 和状态
    navigate('/user/123', {
      state: { role: 'admin' }
    });
  };

  return (
    <div>
      <h1>首页</h1>
      <button onClick={handleViewUser}>查看用户 123</button>
    </div>
  );
}

export default Home;

3. 用户详情页（UserDetail.jsx）

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

function UserDetail() {
  const { id } = useParams(); // 获取 URL 参数
  const location = useLocation(); // 获取传递的状态

  return (
    <div>
      <h1>用户 ID: {id}</h1>
      <p>角色: {location.state?.role || '普通用户'}</p>
    </div>
  );
}

export default UserDetail;

4. 表单提交后跳转（About.jsx）

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

function About() {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // 模拟提交成功，跳转回首页并替换历史
    navigate('/', { replace: true });
  };

  return (
    <div>
      <h1>关于我们</h1>
      <form onSubmit={handleSubmit}>
        <button type="submit">提交并返回首页</button>
      </form>
    </div>
  );
}

export default About;

五、useNavigate 使用注意事项

组件位置：只能在 <Router> 包裹的组件内使用 useNavigate。
异步操作：在异步回调（如 setTimeout 或 AJAX 请求）中使用时，需确保组件未卸载。
路径匹配：确保目标路径在路由配置中已定义。

通过 useNavigate，我们可以灵活控制应用导航逻辑，常用于按钮点击、表单提交等需要动态跳转的场景。