React Router Dom V6中如何检测变量含重定向对象并跳转

方法一：组件内检测重定向对象并手动跳转 #

React Router通过redirect()生成的RedirectResponse对象自带标识，你可以在组件里通过工具函数或属性判断来识别，再用useNavigate执行跳转：

1. 导入所需工具：

import { useLoaderData, useNavigate, isRedirect } from 'react-router-dom';

2. 在组件中检测处理：

function TargetComponent() {
  const { userDetail, permissions } = useLoaderData();
  const navigate = useNavigate();

  // 检查userDetail是否为重定向对象
  if (isRedirect(userDetail)) {
    navigate(userDetail.to);
    return null; // 阻止组件后续渲染
  }

  // 检查permissions是否为重定向对象
  if (isRedirect(permissions)) {
    navigate(permissions.to);
    return null;
  }

  // 正常渲染逻辑
  return (
    <div>
      <h2>用户详情：{userDetail.name}</h2>
      <p>权限列表：{permissions.join(', ')}</p>
    </div>
  );
}

如果不想用isRedirect工具函数，也可以直接判断对象的type属性（RedirectResponse的type固定为'redirect'）：

if (userDetail?.type === 'redirect') {
  navigate(userDetail.to);
  return null;
}

方法二：在Loader中提前处理重定向（更规范） #

React Router的Loader本身支持直接返回重定向对象，此时路由会自动触发跳转，不会进入组件渲染流程。你可以修改Loader逻辑，在拿到responseHandler的结果后先判断是否为重定向，是的话直接返回，否则再包装成数据对象：

import { redirect } from 'react-router-dom';

async function loadUserDetail() {
  const response = await fetch('/api/user-detail');
  const result = await responseHandler(response);

  // 若为重定向对象，直接返回给路由处理
  if (result.type === 'redirect') {
    return result;
  }

  // 返回正常数据
  return { userDetail: result };
}

async function getAllPermissions() {
  const response = await fetch('/api/permissions');
  const result = await responseHandler(response);

  if (result.type === 'redirect') {
    return result;
  }

  return { permissions: result };
}

这种方式不需要在组件内做额外判断，路由会自动处理跳转，更符合React Router的设计规范。

内容的提问来源于stack exchange，提问作者Divya