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

前言

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

一、useNavigate 的核心功能

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

二、useNavigate 基本用法

1. 安装与配置

确保已安装 React Router v6:

javascript 复制代码
npm install react-router-dom@6

2. 基本导航

在函数组件中调用 useNavigate,返回 navigate 函数:

javascript 复制代码
import { useNavigate } from 'react-router-dom';

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

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

三、useNavigate常见使用场景

1. 路径跳转

javascript 复制代码
// 跳转到指定路径
navigate('/about');

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

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

2. 替换当前页面

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

3. 前进/后退

javascript 复制代码
// 返回上一页
navigate(-1);

// 前进一页
navigate(1);

4. 传递状态(State)

javascript 复制代码
// 跳转时传递数据(不暴露在 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

javascript 复制代码
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

javascript 复制代码
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

javascript 复制代码
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

javascript 复制代码
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,我们可以灵活控制应用导航逻辑,常用于按钮点击、表单提交等需要动态跳转的场景。

相关推荐
止观止13 分钟前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall13 分钟前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴19 分钟前
简单入门Python装饰器
前端·python
袁煦丞1 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码1 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端3 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix4 小时前
AI辅助网页设计:从图片到代码的实践探索
前端