React 路由器 v6，作为 Route 元素传递的 JSX 组件未被触发

Question

I'm trying to set a persistentLogin component that verifies is the user still has a valid refresh token and if so, send a new access token.

Here is the code in the router:

const Routes = () => {
   const { user } = useAuth();

   return (
      <Router>
         <Route index element={<Home />} />
         <Route path='auth-form' element={<AuthForm />}>
            <Route path='register' element={<Register />} />
            <Route path='login' element={<Login />} />
         </Route>
------->>> Here is the component
         <Route element={<PersistLogin />}>
            {user && (
               <>
                  {user.isDev ? (
                     <>
                        {DEV_NAVIGATION.map((nav) => (
                           <Route key={nav.path} path={`${nav.path}`} element={nav.component} />
                        ))}
                     </>
                  ) : (
                     <>
                        {RECRUITER_NAVIGATION.map((nav) => (
                           <Route key={nav.path} path={`${nav.path}`} element={nav.component} />
                        ))}
                        <Route path='/*' element={<Navigate to='/' replace={true} />} />
                     </>
                  )}
               </>
            )}
         </Route>
         <Route path='/*' element={<Navigate to='/' replace={true} />} />
      </Router>
   );
};

And here is the code in PersistentLogin.tsx:

const PersistLogin = () => {
   const [isLoading, setIsLoading] = useState(true);
   const refresh = useRefreshToken();
   const { access_token } = useAuth();

   useEffect(() => {
      const verifyRefreshToken = async () => {
         try {
            await refresh();
         } catch (e) {
            console.log(e);
         } finally {
            setIsLoading(false);
         }
      };

      !access_token ? verifyRefreshToken() : setIsLoading(false);
   }, [access_token, refresh]);

   return <>{isLoading ? <p>...Is loading</p> : <Outlet />}</>;
};

export default PersistLogin;

But I don't why when the user lands on home page of the website ('/'), the component isn't triggered, any body has an idea why?

Answer 1

It doesn't appear any of the Route components are rendered by the Routes component ( Routes from react-router-dom , not your Routes which will need to be renamed ).

Example:

const AppRoutes = () => {
  const { user } = useAuth();

  return (
    <Router>
      <Routes> // <-- routes rendered into Routes component
        <Route index element={<Home />} />
        <Route path='auth-form' element={<AuthForm />}>
          <Route path='register' element={<Register />} />
          <Route path='login' element={<Login />} />
        </Route>
        <Route element={<PersistLogin />}>
          {user && (
            <>
              {(user.isDev ? DEV_NAVIGATION : RECRUITER_NAVIGATION)
                .map((nav) => (
                  <Route key={nav.path} path={nav.path} element={nav.component} />
                ))
              }
            </>
          )}
        </Route>
        <Route path='/*' element={<Navigate to='/' replace />} />
      </Routes>
    </Router>
  );
};