在 react router v6 中，loader 返回 `redirect()` 对象时若被误包进普通数据结构，会导致跳转失效；本文提供一种类型安全、可预测的响应封装模式，通过 `data`/`redirect` 双字段结构实现自动重定向检测与拦截。
在 React Router v6 的数据加载流程中，loader 函数必须直接返回 redirect() 调用（如 return redirect('/')）才能触发导航；若将 redirect() 实例作为某个对象的属性（例如 { permissions: redirect('/') }）返回，Router 将视其为普通数据，不会执行跳转——这正是你遇到的核心问题。
根本原因在于：redirect() 返回的是一个特殊的、具有 type: "redirect" 和 location 字段的 Plain Object（由 createRedirect 构造），它仅在 loader 顶层返回值 中才被 Router 解析为导航指令。一旦被嵌套，就失去了语义意义。
✅ 推荐解决方案：采用标准化响应契约（Response Contract）
即让所有异步请求处理器（如 responseHandler）统一返回形如 { data: T | null; redirect?: string } 的对象。该结构明确区分「有效数据」与「跳转指令」，既保持类型清晰，又便于 loader 层做集中判断。
以下是优化后的完整实践：
1. 改写 responseHandler —— 统一返回结构
const toastOptions = {
position: toast.POSITION.TOP_RIGHT,
};
export function responseHandler(response: AxiosResponse) {
// 成功且业务态 success === true
if (response.data?.success === true) {
toast.success(response.data.message, toastOptions);
return { data: response.data.data };
}
// 业务失败（success === false）
if (response.data?.success === false) {
toast.error(response.data.message, toastOptions);
return { data: null };
}
// HTTP 状态异常：401 或其他错误
if (response.status === 401) {
localStorage.clear();
toast.error(response.data?.message || 'Unauthorized', toastOptions);
} else {
toast.error('Something went wrong', toastOptions);
}
// 所有异常路径均返回重定向指令（不执行 redirect()！）
return { redirect: '/' };
}⚠️ 关键注意：此处 绝不调用 redirect()，而是返回 { redirect: '/login' } 这样的纯对象。真正的 redirect() 调用只发生在 loader 顶层。
2. 增强 loader —— 检测并透传重定向
import { redirect } from 'react-router-dom';
export async function loader({ params }: LoaderFunctionArgs) {
const { userId, userAction } = params;
// 并发请求，各自返回 { data, redirect? }
const [permissionsRes, userDetailRes] = await Promise.all([
getAllPermissions(),
loadUserDetail(userId, userAction),
]);
// 任一响应含 redirect → 立即终止加载，触发跳转
if (permissionsRes.redirect) {
return redirect(permissionsRes.redirect);
}
if (userDetailRes.redirect) {
return redirect(userDetailRes.redirect);
}
// 否则组装正常数据
return {
permissions: permissionsRes.data,
userDetail: userDetailRes.data,
userAction,
};
}✅ 优势：
- ✅ 逻辑集中：重定向决策完全收口于 loader，与 UI 组件解耦；
- ✅ 类型友好：TypeScript 可精确推导 permissionsRes 类型为 { data: Permission[] } | { redirect: string }；
- ✅ 可扩展：后续新增 loader 分支（如校验权限、检查会话）可复用同一检测模式；
- ✅ 调试友好：console.log(permissionsRes) 显示清晰结构，避免误判 redirect 对象。
3. 组件内无需额外检测 —— 安全解构
由于 loader 已确保仅当无重定向时才返回数据对象，组件中可安全使用：
const { userDetail, userAction, permissions } = useLoaderData();
// 此时 userDetail 和 permissions 必为业务数据（或 null），绝不会是 redirect 对象
if (!userDetail) {
return Loading or no access...;
}
return (
? 补充建议
- 若需支持多级重定向路径（如 /login?from=/admin/users/123），可在 responseHandler 中动态构造 redirect 字符串；
- 对于复杂鉴权场景，可将 redirect 提升为 { redirect: { to: string; replace?: boolean; state?: any } } 结构，再在 loader 中解构调用 redirect(...)；
- 配合 useNavigate 在组件中手动跳转时，务必使用 navigate('/path', { replace: true }) 避免历史栈污染。
通过这一契约式设计，你彻底规避了“重定向被吞没”的陷阱，同时提升了 loader 的可维护性与可测试性——所有副作用（Toast、Storage 清理）保留在 responseHandler，所有路由控制逻辑集中在 loader，职责清晰，稳健可靠。
