Necesito ayuda sobre el enrutamiento privado en react-router-6. En realidad, quiero devolver un componente solo cuando la API de back-end devuelve una respuesta exitosa. consulte el siguiente fragmento de código,
export default function PrivateOutlet() { const dispatch = useDispatch(); useEffect(() => { dispatch(getCurrentUser()) .then((res) => { localStorage.setItem('id', res.id); }) .catch(error => console.log(error) ); }, [); return (localStorage.getItem('id') !== "undefined") ? <Outlet /> : <Navigate to="/login" /> };Aquí, el problema es que, antes de devolver una respuesta exitosa de la API getCurrentUser(), esta función PrivateOutlet devuelve valor. ¿Puedes ayudarme con esto?
El localStorage parece completamente extraño/superfluo si lo que realmente quiere es usar la acción getCurrentUser para obtener una id . Use una id de estado local que no coincida con el valor de id autenticado o no autenticado. Espere hasta que se complete el estado de id para representar el Outlet o redirigir.
Ejemplo:
export default function PrivateOutlet() { const [id, setId] = React.useState(); const dispatch = useDispatch(); useEffect(() => { dispatch(getCurrentUser()) .then((res) => { setId(res.id); // valid id or null }) .catch(error => { console.log(error); setId(null); ); }, []); if (id === undefined) return null; // or loading indicator/spinner/etc return (id) ? <Outlet /> : <Navigate to="/login" replace /> }; Si desea continuar usando localStorage, use un estado de "carga" local y renderice condicionalmente null o algún indicador de carga hasta que se obtenga la identificación de usuario actual. Además, no estoy seguro de si fue un error tipográfico, pero es muy probable que haya querido comparar el valor de localStorage con undefined y no con el literal de cadena "undefined" . Esto aún funciona porque la actualización del estado de carga activa una nueva representación y el componente puede leer el valor de id recién establecido en localStorage.
Ejemplo:
export default function PrivateOutlet() { const [isLoaded, setIsLoaded] = React.useState(false); const dispatch = useDispatch(); useEffect(() => { dispatch(getCurrentUser()) .then((res) => { localStorage.setItem('id', res.id); }) .catch(error => { console.log(error); localStorage.removeItem('id'); ) .finally(() => setIsLoaded(true)); }, []); if (!isLoaded) return null; // or loading indicator/spinner/etc return (localStorage.getItem('id') !== undefined) ? <Outlet /> : <Navigate to="/login" replace /> };