react-router 的 data API 问题求教

最近想摸一个简单的管理后台页面，前端登录这块一开始是参考的 react-router 官方的一个示例

想要实现一个如果请求 statusCode 是 4xx 的话就重新跳转到登录页的功能，考虑使用 react-router 的errorElement捕获 error 实现，为此需要使用 v6.4 加入的 createBrowserRouter 来创建路由，把官方示例中 App.tsx 路由申明部分改成了这样：

const router = createBrowserRouter( createRoutesFromElements( <Route element={<Layout />}> <Route path="/" element={<PublicPage />} /> <Route path="/login" element={<LoginPage />} /> <Route path="/protected" element={ <RequireAuth> <ProtectedPage /> </RequireAuth> } /> </Route> ) ); return ( <AuthProvider> <RouterProvider router={router} /> <AuthProvider/> ); 

并去掉了 main.tsx 中的 <BrowserRouter><BrowserRouter/>

随后运行示例就发现了一个诡异的问题：

登录第一次成功后它不能跳转到 /protected 下，原因是被 RequireAuth 组件给拦住了，跳转回了 /login ，需要点两次登录才能顺利跳转，可是明明在 signin 的回调中 setUser(newUser) 了，这个现象在原本用了 <BrowserRouter> 的示例中没有出现，一使用 createBrowserRouter 就会这样。

翻了两天文档还是毫无头绪，望前端大佬不吝赐教。