在 React Router v6 中，若在根路径（/）的 loader 中直接调用 redirect() 会导致无限重定向循环；正确做法是分离数据预加载逻辑与导航行为——用 loader 预取数据，用 <Route index> + <Navigate> 实现声明式默认跳转。
在 react router v6 中，若在根路径（`/`）的 loader 中直接调用 `redirect()` 会导致无限重定向循环；正确做法是分离数据预加载逻辑与导航行为——用 `loader` 预取数据，用 `
React Router v6 的 loader 函数设计为纯数据获取层，其返回值会被视为路由数据（或重定向指令）。当 loader 无条件返回 redirect(...) 时，Router 会立即导航到目标路径；而若该目标路径（如 /workspaces/1）又匹配到同一 loader 所在的父路由（/），则可能触发 loader 再次执行 → 再次重定向 → 循环发生。尤其在嵌套路由中，这种隐式匹配极易引发难以调试的无限渲染/重定向。
✅ 正确解法：职责分离 + 声明式导航
核心原则：loader 只负责数据准备，导航交由路由结构控制。
1. 重构 loader：移除重定向，专注数据预取
将 homeLoader 改写为高阶函数，接收 queryClient 后返回标准 loader 函数：
const homeLoader = (queryClient: QueryClient) => async () => {
// 预加载关键数据，不触发导航
await queryClient.ensureQueryData(['someKey'], doSomething);
// 返回任意值（如 null 或空对象），表示数据已就绪
return null;
};⚠️ 注意：ensureQueryData 是异步操作，需 await 确保完成；返回 null 表示 loader 成功完成，无重定向意图。
2. 使用 <Route index> 定义默认子路由
在根路由 / 下添加一个 index 子路由，并用 <Navigate> 声明跳转逻辑：
import {
createBrowserRouter,
createRoutesFromElements,
Route,
Navigate,
} from 'react-router-dom';
const router = createBrowserRouter(
createRoutesFromElements(
<Route
path="/"
element={<Home />}
loader={homeLoader(queryClient)} // 注入 queryClient，返回 loader 函数
>
{/* ✅ 关键：index 路由处理 "/" 的默认行为 */}
<Route index element={<Navigate to="/workspaces/1" replace />} />
<Route path="workspaces" element={<Workspaces />}>
<Route path=":workspaceId" element={<Workspace />} />
</Route>
</Route>
)
);- <Route index> 匹配 / 路径本身（无子路径），且仅在父路由 loader 成功完成后才渲染；
- <Navigate to="..." replace /> 是客户端导航指令，不会再次触发父 loader，彻底避免循环；
- replace: true 避免在历史栈中留下冗余的 / 记录，提升 UX。
3. 验证与注意事项
- 不要在 loader 中调用 redirect() 处理业务逻辑跳转：redirect() 应仅用于认证拦截、权限校验等服务端语义场景（如未登录跳 /login），而非默认路由引导。
- 确保 queryClient 实例唯一且已初始化：通常通过 QueryClientProvider 提供，loader 中注入的必须是同一实例。
- Loader 执行时机：/ 的 loader 会在首次访问 / 时执行一次（含 index 子路由匹配时），之后导航至 /workspaces/1 不会重复执行它。
总结
无限重定向的本质是混淆了“数据准备”与“导航决策”两个关注点。React Router v6 推崇声明式、可预测的路由行为：用 loader 保障数据就绪，用 index + Navigate 显式定义默认入口。这一模式不仅解决循环问题，还提升了代码可读性、可测试性及与 React Query 的协作效率。
