Estoy usando una ruta privada para navegar a una ruta después de que el usuario haya iniciado sesión. Sin embargo, tengo un problema. No sé por qué, pero mi enrutador no hace la transición a la ruta deseada. Aquí está mi código:
Rutas.js
... ... <PrivateRoute authenticated={localStorage.getItem("isAuthenticated")} path="/dashboard" component={DashBoard} exact ></PrivateRoute>PrivateRoute.js
const PrivateRoute = ({ component: Component, authenticated, ...rest }) => ( <Route {...rest} render={props => authenticated ? ( <Component {...rest} {...props} /> ) : ( <Redirect to={{ pathname: '/', state: { from: props.location } }} /> ) } /> ); export default PrivateRoute;Iniciar sesión.js
localStorage.setItem("isAuthenticated", true); this.props.history.push('/dashboard');Cualquier ayuda sería apreciada. ¡Gracias!
¿Puedes intentarlo?
PrivateRoute.js
const PrivateRoute = ({ component: Component, authenticated, ...rest }) => { console.log("authenticated",authenticated)//is it true or false? if (authenticated=="true") return ( <Route {...rest}> {" "} <Component {...rest} {...props} /> </Route> ); else return ( <Redirect to={{ pathname: "/", state: { from: props.location }, }} /> ); }; export default PrivateRoute;Entonces, encontré la solución.
authenticated={localStorage.getItem("isAuthenticated")}lo anterior estaba invocando el método en el arranque de la aplicación debido a que tenía el valor de nulo almacenado en mi variable autenticada, así que lo cambié a la función de flecha y pasé el argumento sin invocarlo como se muestra a continuación:
authenticated={() => localStorage.getItem("isAuthenticated")}