别再混淆了！一文看懂 useNavigate 和 redirect 的适用场景

redirect 和 useNavigate 是 React Router 中用于导航的两种截然不同且适用于不同场景的工具，具有各自独特的职责和使用方式。

虽然两者都用于实现页面跳转，但它们在来源、使用位置、返回类型和工作原理上存在本质区别。

useNavigate Hook

import { useNavigate } from "react-router";

export function useLogoutAfterInactivity() {
  let navigate = useNavigate();

  useFakeInactivityHook(() => {
    navigate("/logout");
  });
}

• 来源与类型：useNavigate 是一个 React Hook，通过 react-router 导入。

• 用途：它返回一个 navigate 函数，用于在 React 函数组件或自定义 Hook 内部进行客户端编程导航。

• 调用方式：您可以在组件的事件处理函数（如 onClick）、副作用（如 useEffect）或任何其他基于组件状态或用户交互的逻辑代码中调用 navigate 函数。

• 特点：

  • 它触发的是客户端导航，会改变浏览器历史记录，并触发路由匹配和组件渲染。
  • navigate 函数是一个行为（behavior），由 React 组件的生命周期或用户交互驱动。
  • 支持相对路径、前进/后退（navigate(-1)）和传递状态（state）等高级功能。

redirect 工具函数

import { redirect } from "react-router";

export async function loader({ request }) {
  let user = await getUser(request);
  if (!user) {
    return redirect("/login");
  }
  return { userName: user.name };
}

在创建一条新记录后（例如，在数据库中新建了一个项目），通常会立即重定向（跳转）到这条新记录的详情页。

import { redirect } from "react-router";

export async function action({ request }) {
  let formData = await request.formData();
  let project = await createProject(formData);
  return redirect(`/projects/${project.id}`);
}

• 来源与类型：redirect 是一个从 react-router 导出的工具函数。

• 用途：它主要用于 React Router 的数据路由器 (Data Router) 特性中的 loader 和 action 函数内部。

• 调用方式：您不能在 React 组件内部直接调用 redirect。

• 特点：

  • 它返回一个特殊的 Response 对象，这个对象包含了重定向的信息。
  • 当 loader 或 action 返回一个 redirect 响应时，React Router 会立即中断当前的数据处理流程，并执行重定向，不会渲染组件。
  • redirect 是一个数据（data），而不是行为（behavior）。

总结关键区别

特性	useNavigate	redirect
类型	React Hook (返回一个函数)	工具函数 (返回一个 Response 对象)
使用场景	组件内部，基于用户交互、副作用或条件逻辑进行导航	路由的 loader 或 action 函数中，处理数据逻辑后的重定向
调用位置	函数组件的 JSX 或 Hook 内部	路由配置的 loader 或 action 函数的顶层
导航方式	客户端导航，动态触发	服务器端逻辑 (或数据层)，返回重定向响应
是否渲染组件	会触发组件渲染	立即中断流程，不渲染组件
返回内容	一个可调用的函数 (navigate)	一个特殊的 Response 对象
典型用例	按钮点击后跳转、表单提交成功后、用户不活跃自动登出	未登录用户访问受保护路由时重定向、表单处理失败后重定向到错误页

useNavigate 和 redirect 虽然都实现导航，但它们服务于 React Router 导航策略中不同层面的需求，是互补而非替代关系。