Actualmente estoy siguiendo un tutorial sobre react-router-dom y cada vez que coloco mis tres rutas en Router , sigo recibiendo páginas en blanco en las tres rutas cuando abro localhost. Estoy usando path y el element para configurar las rutas con operadores ternarios dentro del atributo del element , pero aún obtengo una página en blanco al renderizar. ¿Alguna idea de por qué sucede esto? ¡Gracias!
Aplicación.js
import React, { Fragment, useState, useEffect } from "react"; import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"; //components import Login from "./components/Login"; import Register from "./components/Register"; import Dashboard from "./components/Dashboard"; function App() { const checkAuthenticated = async () => { try { const res = await fetch("http://localhost:5000/auth/verify", { method: "GET", headers: { token: localStorage.token } }); const parseRes = await res.json(); parseRes === true ? setIsAuthenticated(true) : setIsAuthenticated(false); } catch (err) { console.error(err.message); } }; useEffect(() => { checkAuthenticated(); }, []); const [isAuthenticated, setIsAuthenticated] = useState(false); const setAuth = boolean => { setIsAuthenticated(boolean); }; return ( <Fragment> <Router> <div className="container"> <Switch> <Route path="/login" element={ !isAuthenticated ? ( <Login setAuth={setAuth} /> ) : ( <Redirect to="/dashboard" /> ) } /> <Route path="/register" element={ !isAuthenticated ? ( <Register setAuth={setAuth} /> ) : ( <Redirect to="/dashboard" /> ) } /> <Route path="/dashboard" element={ isAuthenticated ? ( <Dashboard setAuth={setAuth} /> ) : ( <Redirect to="/login" /> ) } /> </Switch> </div> </Router> </Fragment> ); } export default App;El componente de Route en react-router-dom@5 no tiene un accesorio de element , el element es un accesorio v6.
En su lugar, utilice la función `render prop.
Ejemplo:
<Switch> <Route path="/login" render={props => !isAuthenticated ? ( <Login setAuth={setAuth} {...props} /> ) : ( <Redirect to="/dashboard" /> ) } /> <Route path="/register" render={props => !isAuthenticated ? ( <Register setAuth={setAuth} {...props} /> ) : ( <Redirect to="/dashboard" /> ) } /> <Route path="/dashboard" render={props => isAuthenticated ? ( <Dashboard setAuth={setAuth} {...props} /> ) : ( <Redirect to="/login" /> ) } /> </Switch> Es probable que el estado no autenticado coincida con su estado inicial antes de que se confirme el estado de autenticación. Utilice un valor de estado inicial isAuthenticated que no sea ni autenticado ni no autenticado, es decir, ni verdadero ni falso. Utilice este valor de estado "tercer" para convertir condicionalmente en nulo o algún otro indicador de carga mientras se resuelve el estado de autenticación.
Ejemplo:
const [isAuthenticated, setIsAuthenticated] = useState(); if (isAuthenticated === undefined) { return null; // or loading spinner, etc... } return ( ... routes & UI ... );