react-router 的 data API 问题求教

[Akitora]

最近想摸一个简单的管理后台页面，前端登录这块一开始是参考的 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 就会这样。

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

复现： https://stackblitz.com/edit/github-cnzc4l-gjsber?file=src/main.tsx

[morri]

直接快进到 https://nextjs.org/ 吧

使用 https://swr.vercel.app/zh-CN hook 。我最近也在研究，nextjs 的好处还在于可以服务端渲染你想要渲染的页面。

[christin]

<Route path="/login" element={<LoginPage />} />
<Route
path="/protected"
element={
<RequireAuth>
<ProtectedPage />
</RequireAuth>
}
/>
把 login 放到 protected 下面试一下

[Jarvis666]

能给一个复现的代码仓库吗？我最近也在看 auth 这个例子😀

[randomstream]

不知道啥情况，但是将状态使用变量定义在组件外面就不会出现问题，不知道是不是 useState 更新是异步和 react-router 之间的问题还是啥的。。

[Akitora]

@Jarvis666 复现 https://stackblitz.com/edit/github-cnzc4l-gjsber?file=src/main.tsx

@randomstream 确实是这样的感觉！像是状态更新慢了一拍一样。找到的唯一一个能用的示例它保存状态使用的是 localStorage…

@christin 这样 login 都访问不了了吧…

[Jarvis666]

可以在 setUser(newUser) 打印一下 newUser ，第一次打印出来的 user 为 null ，第二次打印出来的 user 是第一次输入的 username ，可以通过输入两次输入不同的值来验证。
感觉 setState() 是异步的，大佬知道的艾特我一下😂

[liuzhaowei55]

@Jarvis666 应该就是大佬说的 setState 异步更新的问题

https://stackblitz.com/edit/github-cnzc4l-wldcop?file=src%2FApp.tsx

用 useEffect 等 user 改变后再 callback 就成了