Estoy tratando de hacer lo mismo que esta respuesta , luego creé un componente llamado ProtectedRoute .

Se colocó ProtectedRoute en App.tsx . Se supone que esto representa la asignación de múltiples componentes de ProtectedRoute sobre ProtectedRoutes .

Cuando se procesa el componente ProtectedRoute , envía una solicitud HTTP para verificar el token.

 useLayoutEffect(() => { axios .get('http://localhost:5000/authorization', { withCredentials: true, }) .then((response) => { setHasValidToken(true); console.log('valid token!'); }) .catch((error) => { if (error.response.data.message) { console.error(error.response.data.message); } else { console.error(`Error: ${error}`); } setHasValidToken(false); navigate('/login'); }); }, [navigate]);

Según el resultado, establece el estado hasValidToken . Luego devuelve lo siguiente.

 return ( <> {hasValidToken ? ( <Route path={path} element={element} /> ) : ( <Navigate to="/login" /> )} </> );

Sin embargo, este operador ternario parece no funcionar correctamente. Además, nunca registra en la consola los mensajes en el componente. (coloqué algunos console.log en el componente)

También traté de comentar todo dentro del return en el componente, pero aún así se representó toda la ruta de la ruta protegida.

Es extraño que todas las rutas aún se puedan representar a pesar de que ProtectedRoute no devuelve nada.

Espero que esto tenga sentido y obtenga ayuda para descubrir qué está pasando y qué podría perderme.