Estoy tratando de implementar una ruta protegida, que primero intenta obtener una autenticación (llamada api) para que pueda mostrar la ruta. Pero de alguna manera el valor del estado no cambia... ¿Tienes alguna idea?
const ProtectedRoute = ({ component: Component, ...rest }) => { const [isAuthenticated, setIsAuthenticated] = useState(false); const fetch = async () => { const result = await axios.get("http://localhost:5000/auth/", { withCredentials: true, }); if (result.status >= 200 && result.status < 300) { setIsAuthenticated(true); } else { setIsAuthenticated(false); } }; useEffect(() => { fetch(); }, []); return ( <Route {...rest} render={(props) => { if (isAuthenticated) { return <Component {...props} />; } else { return <Redirect to={"./loginUser"} />; } }} /> ); }; export default ProtectedRoute;Lo que puede hacer es devolver algo cuando la llamada a la API aún se está cargando. Algo como esto :
const ProtectedRoute = ({ component: Component, ...rest }) => { const [isAuthenticated, setIsAuthenticated] = useState(undefined); const [isLoading, setIsLoading] = useState(false); const fetch = async () => { const result = await axios.get("http://localhost:5000/auth/", { withCredentials: true, }); if (result.status >= 200 && result.status < 300) { setIsAuthenticated(true); } else { setIsAuthenticated(false); } }; useEffect(() => { setIsLoading(true); fetch(); setIsLoading(false); }, []); return ( <Route {...rest} render={(props) => { if(isLoading) { // do something } else if (isAuthenticated !== undefined && !isLoading) { return <Component {...props} />; } else { return <Redirect to={"./loginUser"} />; } }} /> ); }; export default ProtectedRoute;