useNavigate

useNavigate 是 React Router v6 中提供的一个 Hook，用于在函数组件中执行导航操作。它替代了 v5 版本中的 useHistory Hook，并且提供了更加简洁和直观的 API 来处理导航逻辑。通过 useNavigate，你可以轻松地实现页面之间的跳转、重定向以及携带状态信息等操作。

useNavigate 的返回值

useNavigate 返回一个 navigate 函数，该函数接受多个参数来控制导航行为：

• to: （必需）可以是字符串形式的目标路径或相对偏移量（用于在历史记录栈中前进或后退）。例如：
  • /home: 导航到绝对路径 /home。
  • -1: 回退到上一页。
  • 1: 前进到下一页。
• options (可选): 一个包含额外选项的对象，可以有以下属性：
  • replace: 布尔值，默认为 false。如果设置为 true，则会替换当前的历史条目而不是添加新的条目。
  • state: 任意类型的状态对象，可以在编程式导航时传递给目标页面。

const navigate = useNavigate();

// 导航到 /home
navigate("/home");

// 回退到上一页
navigate(-1);

// 前进到下一页
navigate(1);

// 导航到 /profile 并替换当前条目
navigate("/profile", { replace: true });

// 导航到 /settings 并传递状态信息
navigate("/settings", { state: { fromDashboard: true } });

使用场景

• 编程式导航：根据应用程序的状态或用户交互动态地改变页面。
• 表单提交后的重定向：在表单成功提交后将用户重定向到另一个页面。
• 错误处理后的重定向：当发生特定错误时，如未授权访问，可以将用户重定向到登录页面或其他适当的页面。
• 带有状态的导航：允许你在导航时传递额外的信息，比如从一个页面到另一个页面的数据。

示例代码

简单导航

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

function GoHomeButton() {
  const navigate = useNavigate();

  return <button onClick={() => navigate("/home")}>Go Home</button>;
}

export default GoHomeButton;

表单提交后的重定向

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

function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();

    // 模拟表单提交逻辑
    if (/* 表单验证 */) {
      // 成功提交后重定向到仪表板
      navigate('/dashboard', { replace: true });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

错误处理后的重定向

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

function ProtectedPage() {
  const isAuthenticated = /* 检查认证状态 */;
  const navigate = useNavigate();

  if (!isAuthenticated) {
    // 如果未认证，则重定向到登录页，并保存当前路径以便后续跳转回来
    navigate('/login', { state: { from: window.location.pathname } });
    return null; // 或者显示加载指示器等
  }

  return <h1>Welcome to the protected page!</h1>;
}

export default ProtectedPage;

带状态的导航

import React from "react";
import { useNavigate, useLocation } from "react-router-dom";

function GoToSettingsButton() {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => navigate("/settings", { state: { fromDashboard: true } })}
    >
      Go to Settings
    </button>
  );
}

function SettingsPage() {
  const location = useLocation();
  const { fromDashboard } = location.state || {};

  return (
    <div>
      <h1>Settings</h1>
      {fromDashboard && <p>Came here from the dashboard.</p>}
    </div>
  );
}

export { GoToSettingsButton, SettingsPage };

注意事项

• 性能优化：虽然 useNavigate 本身不会导致不必要的渲染，但你应该谨慎使用它，避免在不需要的地方触发导航操作。
• 与 Link 和 Navigate 组件的关系：尽管 useNavigate 提供了编程式的导航方式，但在许多情况下，直接使用 <Link> 组件来进行链接导航或者 <Navigate> 组件进行声明式重定向可能更为合适。
• 浏览器兼容性：useNavigate 依赖于浏览器的历史 API (pushState, replaceState)，因此请确保你的应用运行环境支持这些特性。

总结

useNavigate 是一个非常有用的 Hook，它简化了 React Router v6 中的编程式导航。通过理解并正确利用这个 Hook，你可以轻松实现复杂的导航逻辑，包括页面间的跳转、重定向以及携带状态信息。