超越this.props.history.push：React-Router-Dom中的useNavigate

2023-10-03 23:44:20

告别 this.props.history.push：拥抱 useNavigate() 提升 React 路由体验

引言

在 React 应用中穿梭于不同页面时，我们经常需要处理路由跳转。传统上，this.props.history.push() 方法承担着这项任务，然而，现在有了 useNavigate() hook，我们拥有了更简洁、更强大的替代方案。本文将深入探讨 useNavigate() hook 的优势、用法和应用场景，帮助您提升 React 路由体验。

useNavigate() 的介绍

useNavigate() hook 是 React-Router-Dom 提供的内置 hook，它允许我们在组件中轻松进行路由跳转。与 this.props.history.push() 相比，useNavigate() 不仅能取代其功能，还提供了更丰富的特性，让您的代码更加优雅和易懂。

useNavigate() 的基本用法

使用 useNavigate() hook 非常简单。只需在组件中导入并调用它即可：

import { useNavigate } from "react-router-dom";

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

  const handleClick = () => {
    navigate("/about");
  };

  return (
    <button onClick={handleClick}>Go to About</button>
  );
};

在这个示例中，我们在组件中导入了 useNavigate() hook，并定义了一个 handleClick 函数，在函数中调用 navigate() 方法，传入要跳转的路由路径 "/about"。当用户点击按钮时，将跳转到关于页面。

useNavigate() 的传参

useNavigate() hook 支持在路由跳转时传递参数。只需在 navigate() 方法中传入一个包含参数的对象即可：

import { useNavigate } from "react-router-dom";

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

  const handleClick = () => {
    const params = { id: 123 };
    navigate("/user", { state: params });
  };

  return (
    <button onClick={handleClick}>Go to User</button>
  );
};

在该示例中，我们在 navigate() 方法中传递了一个名为 params 的对象，其中包含了一个名为 id 的参数，值为 123。当用户点击按钮时，不仅会跳转到 "/user" 路由，还会将 params 对象作为 state 传递给目标组件。

useNavigate() 的获取参数

在目标组件中，我们可以使用 useLocation() hook 来获取路由跳转时传递的参数：

import { useLocation } from "react-router-dom";

const UserComponent = () => {
  const location = useLocation();

  const params = location.state;

  return (
    <div>
      <h1>User #{params.id}</h1>
    </div>
  );
};

在这个示例中，我们在组件中导入了 useLocation() hook，并获取了当前路由的 location 对象。location 对象包含了路由跳转时传递的参数，我们可以通过 location.state 属性来访问这些参数。

useNavigate() 的优势

使用 useNavigate() hook 有以下优势：