Typescript 使用受保护的路由和入门来响应路由

我已经创建了一个Reaction应用程序，该应用程序具有登录、入职流程和仪表板.入职流程包括两个页面，即创建组织和邀请成员.登录是由Aws Amplify处理的，它也有谷歌的登录.显示这些页面时要判断的条件如下.

Conditions:个

1. 任何用户都可以看到登录页面.
2. 如果登录用户是新用户，他们必须通过入职流程
3. 组织创建和邀请成员路由都只能由登录用户访问.
4. 只有已登录且已完成入职流程的用户才能查看仪表板页面.这是组织创建和邀请成员.如果登录的用户尚未完成入职流程，则应导航到组织创建页面.(自注册流程判断将通过API调用进行).如果用户没有登录，他们应该导航到登录页面.

为了达到这些条件，我创建了一个这样的代码.我遇到的问题是，用户登录并导航到组织创建页面后，里面的内容没有显示，我不确定为什么.

但没有登录的人会被导航到登录，里面的内容也会显示出来.

发生这种情况的具体原因是什么？我是否需要单独的包装来判断入网是否完成？我在同一个地方处理这两个问题.

App.tsx

import { Amplify } from 'aws-amplify';
import { BrowserRouter } from 'react-router-dom';
import AppRoutes from './routes/Routes';


function App() {
  return (
    <>
      <BrowserRouter>
        <AppRoutes />
      </BrowserRouter>
    </>
  );
}

export default App;

路由.多伦多证券交易所

import { Navigate, Route, Routes } from 'react-router-dom';
import ProtectedRoutes from './ProtectedRoutes';

export default function AppRoutes() {
  return (
    <>
      <Routes>
        
        <Route path="login" element={<SignIn />} />
        <Route
          path="create-org"
          element={<ProtectedRoutes component={<CreateOrg  />} />}
        />
  <Route
          path="invite-members"
          element={<ProtectedRoutes component={<InviteMembers  />} />}
        />
  <Route
          path="dashboard"
          element={<ProtectedRoutes component={<Dashboard />} />}
        />
    <Route path="/" element={<Navigate to="/dashboard" />} />

      </Routes>
    </>
  );
}

ProtectedRoutes.tsx

import React, { useEffect, useState } from 'react';
import { Navigate , Outlet} from 'react-router-dom';

interface ProtectedRouteProps {
  component: React.ReactNode;
}

const ProtectedRoutes: React.FC<ProtectedRouteProps> = ({component}) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [hasCompletedSteps, setHasCompletedSteps] = useState(false);

  useEffect(() => {
    const checkUser = async () => {
      try {
        const authUser = await getUserAccessToken();
        setIsAuthenticated(authUser ? true : false);
        if (authUser ) {
          const onboardingComplete = await otherService.get('/onboarding');
       

          if (check for the onboarding process) {
            setHasCompletedSteps(false);
          } else {

            setHasCompletedSteps(true);
          }
          setIsLoading(false);
        } else {
          setIsLoading(false);
        }
      } catch (error) {
        setIsLoading(false);
        setIsAuthenticated(false);
      }
    };

    checkUser ();
  }, []);

  if (isLoading) {

    return <p>Loading...</p>;
  }


  if (isAuthenticated && !hasCompletedSteps) {    
    return <Navigate to='/create-org' replace />;
  }

  return <>{component}</>;
};

export default ProtectedRoutes;