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

相关推荐
伍哥的传说43 分钟前
React & Immer 不可变数据结构的处理
前端·数据结构·react.js·proxy·immutable·immer·redux reducers
90后的晨仔1 小时前
从传统 CSS 到 Vue 的 Class 与 Style 动态绑定全解
前端·vue.js
拾光拾趣录1 小时前
前端灵魂拷问:10道题
前端·面试
独泪了无痕2 小时前
Vite 模块动态导入之Glob导入
前端·vue.js·vite
xdpcxq10293 小时前
Docker用Web应用实例深入容器
前端·docker·容器
zhuà!3 小时前
taro+react重新给userInfo赋值后,获取的用户信息还是老用户信息
javascript·react.js·taro
超浪的晨3 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发
tianchang3 小时前
React Hook 解析(二):`useEffect` 与 `useLayoutEffect`
前端·react.js
codervibe3 小时前
使用 Vue3 + Axios 与 Spring Boot 高效对接(含 token 处理)
前端·vue.js
云边散步3 小时前
《校园生活平台从 0 到 1 的搭建》第五篇:商品后端
前端·后端