Tanstack Router查询错误后重定向路由未自动渲染问题咨询

我在React应用中使用@tanstack/react-router和@tanstack/react-query，已配置QueryClient处理错误，当出现401未授权错误时重定向至登录页面。然而重定向完成后，URL已变为/login，但页面内容并未更新显示登录页，直到我手动与页面交互（如点击链接）才会显示。

1. 变量初始化顺序错误：代码中先创建queryClient，但此时router还未定义，onError中引用的router是未初始化的实例，导致导航无法正确触发路由更新。
2. 未精准匹配401错误：当前代码会对所有错误执行重定向，可能干扰正常错误处理。
3. 未清除错误查询缓存：401错误后，错误的查询缓存可能残留，导致路由更新后仍有异常状态。

调整代码顺序，确保router先于queryClient的错误处理被初始化，同时精准判断401错误并清除相关缓存：

import { StrictMode } from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter, redirect } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";
import {
  QueryCache,
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import "./index.css";
import "./i18n";

// 先初始化router（此时context暂为空）
export const router = createRouter({ routeTree, context: {} });

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error) => {
      // 精准判断401未授权错误
      if (error instanceof Error && (error as any)?.response?.status === 401) {
        // 清除所有查询缓存，避免残留错误状态
        queryClient.clear();
        // 使用正确初始化的router实例执行导航，replace模式避免回退到错误页面
        router.navigate({ to: "/login", replace: true });
      }
    },
  }),
});

// 更新router的context，传入初始化完成的queryClient
router.setContext({ queryClient });

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const rootElement = document.getElementById("root")!;
if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <RouterProvider router={router} />
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </StrictMode>
  );
}

• 调整初始化顺序：先创建router实例，再初始化queryClient，确保onError中使用的是已完成初始化的router。
• 精准错误判断：仅在捕获到401状态码的错误时执行重定向，避免误触发。
• 清除查询缓存：重定向前调用queryClient.clear()清除所有缓存，防止错误状态残留影响页面渲染。
• 使用replace模式导航：replace: true会替换当前历史记录，用户回退时不会回到之前的错误页面，同时确保路由状态正确更新。

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