使用 useNavigate Hook 掌握 React 中的导航-js教程-PHP中文网

Mastering Navigation in React with the useNavigate Hook

在 React 中使用Navigate Hook

useNavigate 钩子是 React Router（v6 及更高版本）的一部分，用于以编程方式在应用程序中的不同路由之间导航。与传统导航（例如单击链接）不同，useNavigate 挂钩允许您根据用户操作动态导航，例如表单提交、按钮单击或状态更改。

这个钩子取代了 React Router v5 中较旧的 useHistory 钩子，并且可以更轻松地处理功能组件内的导航。

useNavigate 的工作原理

useNavigate 挂钩返回一个可用于以编程方式导航到特定路线的函数。您可以将路径或位置对象传递给此函数，它将相应地执行导航。

语法：

const navigate = useNavigate();

登录后复制

参数：

路径（字符串）：导航到的路径（例如“/home”、“/profile/:id”）。
选项（可选，对象）：
- 替换：一个布尔值，确定导航是否应替换当前历史记录条目（默认为 false）。
- state：可以传递给新路由的可选状态。这对于将信息传递到目的地路线非常有用。

常见用法：

导航至不同的路线。
替换当前历史记录条目（无后退操作）。
将附加状态传递到目的地路线。

示例：使用 useNavigate 进行基本导航

这是一个简单的示例，说明如何在用户单击按钮时使用 useNavigate 挂钩以编程方式进行导航。

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

登录后复制

说明：

useNavigate 钩子用于获取导航功能。
单击按钮时，将调用 goToProfile 函数，该函数使用 navigator('/profile') 以编程方式导航到 /profile 路由。

示例：使用动态参数导航

您还可以使用 useNavigate 导航到动态路由，您可以在其中传递参数。

const navigate = useNavigate();

登录后复制

说明：

navigate(/user/${userId}) 根据 userId 参数动态生成 URL。
单击用户 1 或用户 2 的按钮将导航到 /user/1 或 /user/2。

示例：用替换选项替换历史条目

导航时，您可以使用替换选项替换历史堆栈中的当前条目，而不是推送新条目。这意味着当用户点击浏览器的“后退”按钮时，他们不会返回到之前的路线。

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

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

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

登录后复制

说明：

navigate('/thank-you', { Replace: true }) 将导航到 /thank-you 路由并替换历史堆栈中的当前条目，这意味着用户无法使用以下命令返回表单提交页面“后退”按钮。

示例：通过导航传递状态

您可以随导航一起传递附加状态，然后可以使用 useLocation 在目标路线上访问这些状态。

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

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

  const goToUserProfile = (userId) => {
    // Navigate to the profile of a specific user by ID
    navigate(`/user/${userId}`);
  };

  return (
    <div>
      <h2>User List</h2>
      <button onClick={() => goToUserProfile(1)}>Go to User 1's Profile</button>
      <button onClick={() => goToUserProfile(2)}>Go to User 2's Profile</button>
    </div>
  );
};

export default UserList;

登录后复制

在 /settings 路由上，您可以像这样访问传递的状态：

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

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

  const handleSubmit = () => {
    // Perform form submission logic
    // Then navigate to a "Thank You" page, replacing the current entry in history
    navigate('/thank-you', { replace: true });
  };

  return (
    <div>
      <h2>Submit Form</h2>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default SubmitForm;

登录后复制