Estoy intentando crear un componente ProtectedRoutes, sin embargo, parece que he creado un bucle infinito en algún lugar que parece que no puedo entender. Soy un principiante.
Debería comprobar si hay una cookie guardada y, en caso afirmativo, ir al componente. De lo contrario, debería volver a la página principal.
Rutas protegidas.js
import React, { Component, useState } 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"); if (token) { setAuth(true); }; 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> ); }En el componente ProtectedRoutes , está configurando un estado ( setAuth en este caso) directamente dentro del componente, esto es lo que sucede cuando lo hace:
React vuelve a renderizar un componente cada vez que se detecta un cambio de estado, por lo tanto, cuando escribió
export default function ProtectedRoutes({component: Component, ...rest}) { ... if (token) { setAuth(true); }; ... } está ejecutando setAuth (establece un nuevo estado true ) cada vez que el componente se renderiza (se vuelve a renderizar) y, a su vez, vuelve a renderizar el componente cada vez debido al cambio de estado, por lo que tiene un bucle infinito allí. , esto funciona así:
Se ejecuta cada vez que cambia una dependencia (pasada como una matriz), y cuando pasa una matriz vacía, se ejecuta solo dos veces: cuando el componente se monta (se procesa por primera vez) y cuando se desmonta.
Lo que debe hacer es pasar una matriz vacía como una dependencia como se muestra a continuación
import { useEffect } from 'react' export default function ProtectedRoutes({component: Component, ...rest}) { ... useEffect(() => { if (token) { setAuth(true); }; }, []) ... } este setAuth solo una vez cuando el componente se monta
Tu problema es enorme.
export default function ProtectedRoutes({component: Component, ...rest}) { const [auth, setAuth] = useState(false); //get cookie from browser if logged in const token = cookies.get("TOKEN"); if (token) { setAuth(true); }; return auth ? <Component /> : <Navigate to="/" /> } Necesitas poner setAuth en un useEffect
export default function ProtectedRoutes({component: Component, ...rest}) { const [auth, setAuth] = useState(false); React.useEffect(()=>{ const token = cookies.get("TOKEN"); if (token) { setAuth(true); } },[auth]); return auth ? <Component /> : <Navigate to="/" /> }