嵌套的受保护路由和 react-router 竞争条件

Question

我在 react-router v6 上。 我有一个应用程序，我已经为其创建了受保护的路线，到目前为止它可以工作。 但是，我需要保护一些嵌套的路由（在受保护的路由内），这是发生错误的地方。

我试图解释：

1. 我有一个钩子，可以在最顶层获取必要的成员信息。 这与带有 apollo 的 useReactiveVar 和useReactiveVar后端一起使用。 这在大多数情况下都有效。
2. 当这个获取时，我有一层受保护的路由——这将检查用户是否通过 `localStorage.getItem('access_token') 登录。
3. 在我的第二级受保护路由中，它会尝试从上述成员信息中读取数据。 在获取信息时，这将是未定义的。
4. 第一级受保护路由已解决。 然后我的第二级保护被忽略，因为成员数据是null 。 我认为这是一个比赛条件？

我的代码：

// ProtectedRoute.tsx

export const ProtectedRoute = ({
  redirectPath = Routes.Landing,
  isAllowed,
  noBaseLayout,
}: ProtectedRouteProps) => {
  if (!isAllowed) {
    return <Navigate to={redirectPath} replace />;
  }

  if (noBaseLayout) {
    return <Outlet />;
  }

  return (
    <BaseLayout>
      <Outlet />
    </BaseLayout>
  );
};

export default function routes() {
  const isLoggedIn = localStorage.getItem('access_token');
  const currentUser = useReactiveVar(currentMeVar); // This will be null at first until it resolves

  const elements: RouteObject[] = [
    // Unauth'd routes. Visiting these routes *with* a user will direct back to the dashboard
    {
      element: (
        <ProtectedRoute isAllowed={!isLoggedIn} redirectPath={Routes.Dashboard} noBaseLayout />
      ),
      children: [
        {
          path: Routes.Landing,
          element: <LandingPage />,
        },
        {
          path: Routes.PatientLoginToken,
          element: <LoginTokenPage scope={UserScope.Member} />,
        },
        {
          path: Routes.CaregiverLoginToken,
          element: <LoginTokenPage scope={UserScope.Caregiver} />,
        },
        {
          path: Routes.PatientLogin,
          element: <PatientLoginPage />,
        },
        {
          path: Routes.RequestLoginEmail,
          element: <RequestEmailLoginPage />,
        },
        { path: Routes.CaregiverLogin, element: <CaregiverLoginPage /> },
        { path: Routes.CaregiverCompleteSignup, element: <CaregiverCompleteSignupPage /> },
        {
          path: Routes.PatientSignup,
          element: <PatientSignupPageOneStep />,
        },
        {
          path: Routes.PatientSignupClient,
          element: <PatientSignupPageOneStep />,
        },
      ],
    },

    // Auth'd routes. Visiting these routes *without* a user will redirect back to the landing page
    {
      element: <ProtectedRoute isAllowed={!!isLoggedIn} />,
      children: [
        { path: Routes.Dashboard, element: <DashboardPage /> },
        { path: Routes.ContentLibrary, element: <ContentLibraryBrowsePage /> },

        // Auth'd, but user has no covered life yet. This will redirect back to the dashboard page
        {
          element: (
            <ProtectedRoute
              isAllowed={currentUser?.member.hasCoveredLifeAttached}
              redirectPath={Routes.Dashboard}
              noBaseLayout
            />
          ),
          children: [
            { path: Routes.Scheduling, element: <ScheduleSessionTakeoverPage /> },
            { path: Routes.Session, element: <EmbeddedSessionPage /> },
            { path: Routes.PostSession, element: <PostSessionPage /> },
            { path: Routes.Sessions, element: <SessionsPage /> },
            { path: Routes.Profile, element: <ProfilePage /> },
            { path: Routes.ContentLibraryDetail, element: <ContentLibraryDetailPage /> },
            {
              path: Routes.Stats,
              element: <StatsPage />,
              children: [
                {
                  path: Routes.BloodPressureStats,
                  element: <StatsPage.BloodPressureChart />,
                  index: true,
                },
                { path: Routes.WeightStats, element: <StatsPage.WeightChart /> },
                { path: Routes.MoodStats, element: <StatsPage.MoodChart /> },
                {
                  path: Routes.PhysicalActivityStats,
                  element: <StatsPage.PhysicalActivityChart />,
                },
                {
                  path: Routes.HeartRateStats,
                  element: <StatsPage.HeartRateSessionsView />,
                },
                { path: Routes.HeartRateStatsDetail, element: <StatsPage.HeartRateSignalsView /> },
                {
                  path: Routes.BloodOxygenStats,
                  element: <StatsPage.BloodOxygenSessionsView />,
                },
                {
                  path: Routes.BloodOxygenStatsDetail,
                  element: <StatsPage.BloodOxygenSignalsView />,
                },
                {
                  path: Routes.StepsStats,
                  element: <StatsPage.StepsChart />,
                },
                {
                  path: Routes.SleepStats,
                  element: <StatsPage.SleepChart />,
                },
              ],
            },
          ],
        },
      ],
    },

    { path: '*', element: <NotFoundPage /> },
  ];
  return useRoutes(elements);
}