在 React Router v6 中，若在根路径（/）的 loader 中直接调用 redirect()，会因路由未完成导航即触发新匹配而陷入无限重定向循环；正确做法是移除 loader 内重定向逻辑，改用 <Route index> 配合 <Navigate> 组件实现声明式默认跳转，并将数据预取保留在 loader 中。
在 react router v6 中，若在根路径（`/`）的 loader 中直接调用 `redirect()`，会因路由未完成导航即触发新匹配而陷入无限重定向循环；正确做法是移除 loader 内重定向逻辑，改用 `
在使用 React Router v6 与 React Query 构建 SPA 时，一个常见误区是试图在根路径（/）的 loader 中通过 return redirect(...) 实现自动跳转（如跳转至 /workspaces/1）。这种写法看似简洁，实则会引发不可见但高消耗的无限渲染循环：loader 每次返回重定向响应后，Router 会立即匹配新路径（如 /workspaces/1），但该路径尚未加载完成时，又因根路径仍处于活跃匹配状态，再次触发其 loader —— 如此反复，形成死循环。
根本原因在于：loader 的职责是“准备数据”，而非“控制导航”。redirect() 是服务端重定向原语，在客户端路由中应被声明式导航替代；且 loader 函数必须是纯数据获取函数，不应产生副作用或强制跳转逻辑。
✅ 正确解法分两步：
- 将 loader 改为柯里化函数，确保 queryClient 正确注入，同时剥离重定向逻辑；
- 利用 index 路由 + <Navigate> 组件，在 UI 层声明“当访问 / 时应跳转到 /workspaces/1”。
以下是重构后的完整示例：
// 1. 修正 homeLoader：仅负责预取数据，不执行重定向
const homeLoader = (queryClient: QueryClient) => () => {
// ✅ 安全预取数据，不影响导航流程
queryClient.ensureQueryData(['someKey'], doSomething);
// ⚠️ 不再 return redirect(...)！
return null; // 或返回其他必要数据（如初始状态）
};// 2. 在路由配置中使用 index 路由 + Navigate 声明默认行为
import {
createBrowserRouter,
createRoutesFromElements,
Route,
Navigate,
} from 'react-router-dom';
const router = createBrowserRouter(
createRoutesFromElements(
<Route
path="/"
element={<Home />}
loader={homeLoader(queryClient)} // ✅ 柯里化调用，loader 只做数据准备
>
{/* ✅ 关键：index 路由匹配 "/" 且无子路径时生效 */}
<Route index element={<Navigate to="/workspaces/1" replace />} />
<Route path="workspaces" element={<Workspaces />}>
<Route path=":workspaceId" element={<Workspace />} />
</Route>
</Route>
)
);
<RouterProvider router={router} />? 关键注意事项：
- replace: true 确保跳转不向历史栈添加新记录，避免用户点击「返回」回到空 / 页面；
- ensureQueryData 是 React Query 的推荐方式，它会在查询不存在时自动触发获取，并缓存结果，后续组件可直接 useQuery(['someKey']) 消费；
- 若需在跳转前校验权限或 workspace 是否存在，应在 <Navigate> 渲染前加入 useEffect 或自定义 Hook（如 useRequiredWorkspace），而非塞进 loader；
- 切勿在 loader 中调用 navigate()、window.location.href 或任何同步跳转 API —— 这违反了 loader 的设计契约。
总结：客户端路由的导航逻辑应完全交由路由配置（<Route index>）和 UI 组件（<Navigate>）管理；loader 的唯一使命是可靠、高效地准备数据。遵循这一分离原则，既能规避无限循环陷阱，又能提升代码可测试性与可维护性。
