首页 > 文章 > 前端

使用 useNavigate Hook 掌握 React 中的导航

时间：2025-01-10 10:42:43 437浏览收藏

学习文章要努力，但是不要急！今天的这篇文章《使用 useNavigate Hook 掌握 React 中的导航》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

React 中的编程导航：useNavigate Hook

在 React Router v6 及以上版本中，useNavigate Hook 提供了一种以编程方式在应用内路由之间跳转的便捷方法。它与传统的点击链接导航不同，允许你根据用户交互（如表单提交、按钮点击或状态变化）动态控制导航流程。 useNavigate 替代了 v5 版本中的 useHistory Hook，并简化了函数组件中的导航处理。

`useNavigate` 的工作机制

useNavigate Hook 返回一个函数，用于以编程方式跳转到指定的路由。你可以传入路径字符串或位置对象来实现导航。

语法：

const navigate = useNavigate();

参数：

path (字符串): 目标路由路径 (例如，/home，/profile/:id)。
options (可选，对象):
- replace: 布尔值，指示是否替换当前历史记录条目 (默认为 false)。
- state: 传递给目标路由的可选状态对象，方便在路由之间传递数据。

常用场景：

路由跳转
替换当前历史记录条目 (禁用后退按钮)
向目标路由传递状态数据

示例：基本导航

以下示例演示了如何在一个按钮点击事件中使用 useNavigate 进行简单的路由跳转：

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

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

  const goToProfile = () => {
    navigate('/profile');
  };

  return (
    <div>
      <h2>主页</h2>
      <button onClick={goToProfile}>前往个人资料页</button>
    </div>
  );
};

export default Home;

示例：动态参数导航

useNavigate 也支持动态路由参数：

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

const UserList = () => {
  const navigate = useNavigate();

  const goToUserProfile = (userId) => {
    navigate(`/user/${userId}`);
  };

  return (
    <div>
      <h2>用户列表</h2>
      <button onClick={() => goToUserProfile(1)}>前往用户 1 个人资料页</button>
      <button onClick={() => goToUserProfile(2)}>前往用户 2 个人资料页</button>
    </div>
  );
};

export default UserList;

示例：替换历史记录条目

使用 replace 选项可以替换当前历史记录条目，避免用户使用后退按钮返回：

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

const SubmitForm = () => {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // 表单提交逻辑...
    navigate('/thank-you', { replace: true });
  };

  return (
    <div>
      <h2>提交表单</h2>
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
};

export default SubmitForm;

示例：传递状态数据

你可以通过 state 选项传递数据到目标路由，并在目标路由中使用 useLocation 访问：

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

const Dashboard = () => {
  const navigate = useNavigate();

  const goToSettings = () => {
    navigate('/settings', { state: { userId: 123, userName: '张三' } });
  };

  return (
    <div>
      <h2>仪表盘</h2>
      <button onClick={goToSettings}>前往用户设置</button>
    </div>
  );
};

export default Dashboard;

在 /settings 路由中：

import React from 'react';
import { useLocation } from 'react-router-dom';

const Settings = () => {
  const location = useLocation();
  const { userId, userName } = location.state || {};

  return (
    <div>
      <h2>{userName} 的设置 (用户 ID: {userId})</h2>
    </div>
  );
};

export default Settings;