Estoy intentando crear un componente ProtectedRoutes, sin embargo, parece que no puedo actualizar el estado de autenticación.

Debería verificar si hay una cookie almacenada y, de ser así, establecer la autenticación como verdadera. Luego, si la autenticación es verdadera, se redirige al componente de autenticación, de lo contrario, a la página de inicio/inicio de sesión.

La página de autenticación siempre redirige a la página de destino. El estado nunca se actualiza a verdadero. No puedo entender por qué.

Rutas protegidas.js

 import React, { Component, useState, useEffect } from "react"; import { Route, Navigate } from "react-router-dom"; import Cookies from "universal-cookie"; const cookies = new Cookies(); export default function ProtectedRoutes({component: Component, ...rest}) { const [auth, setAuth] = useState(false); //get cookie from browser if logged in const token = cookies.get("TOKEN"); useEffect(() => { if (token) { setAuth(true); console.log(auth); } },[auth, token]); return auth ? <Component /> : <Navigate to="/" /> }

Aplicación.js

 import { Container, Col, Row } from "react-bootstrap"; import "./App.css"; import Register from "./Register"; import Login from "./Login"; import { Routes, Route } from "react-router-dom"; import Account from "./Account"; import FreeComponent from "./FreeComponent"; import AuthComponent from "./AuthComponent"; import Private from "./ProtectedRoutes"; import ProtectedRoutes from "./ProtectedRoutes"; function App() { return ( <Container> <Row> <Col className="text-center"> <h1 className="header">React Authentication Tutorial</h1> <section id="navigation"> <a href="/">Home</a> <a href="/free">Free Component</a> <a href="/auth">Auth Component</a> </section> </Col> </Row> {/* Routes */ } <Routes> <Route exact path="/" element={ <Account /> } /> <Route exact path="/free" element={ <FreeComponent /> } /> <Route path="/auth" element={<ProtectedRoutes component={AuthComponent} />} /> </Routes> </Container> ); } export default App;

AuthComponent.js

 import React from 'react'; export default function AuthComponent() { return ( <div> <h1 className="text-center">Auth Component</h1> </div> ); }