使用 useNavigate Hook 掌握 React 中的导航

在 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;

说明：

• navigate('/settings', { state: { userId: 123, userName: 'John Doe' } }) 传递一个对象作为状态。
• 在 /settings 组件中，我们使用 useLocation 来访问传递的状态，其中包括 userId 和 userName。

---

useNavigate 的常见用例

1. 表单提交后重定向:
   提交表单（例如用户注册）后，您可以将用户重定向到成功或登录页面。

2. 条件导航:
   根据用户操作或条件（例如身份验证），您可以动态导航到不同的路线。

3. 编程路由:
   您可以根据自定义逻辑以编程方式导航，例如操作完成或触发事件时。

4. API 调用成功后导航:
   成功调用 API 后（例如登录），您可以将用户重定向到他们的个人资料页面或仪表板。

---

结论

React Router 中的 useNavigate 钩子是一个强大的工具，用于处理功能组件中的编程导航。它允许您根据用户操作或应用程序状态动态导航到不同的路线。借助替换等选项和传递状态的能力，useNavigate 为控制 React 应用程序中的导航行为提供了灵活性。

---

以上是使用 useNavigate Hook 掌握 React 中的导航的详细内容。更多信息请关注PHP中文网其他相关文章！