当前位置：首页 > news >正文

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

news 2025/4/30 6:58:12

前言

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;