estoy creando las rutas publicas y privadas para una app, pero el problema que me esta apareciendo es que cuando ingresa a traves de sign in, la url entra en un loop entre localhost:3001/signin
y localhost:3001/books/home
, haciendo el que navegador crashee.
Podria ser que el metodo useEffect actualice el state loggedIn provocando el problema?
Actualmente mi archivo routes esta configurado asi:
// React
import React from 'react';
// React-router-dom
import { Route, Switch } from 'react-router-dom';
// Views
import Home from '../views/home';
import SignUp from '../views/signup';
import SignIn from '../views/signin';
import BookHome from '../views/bookviews/bookshome';
// Routes private && public
import PrivateRoute from './privateRoutes';
import PublicRoute from './publicRoutes';
class Routes extends React.Component {
render() {
return (
<Switch>
{/* <Route
path="/"
component={Home} exact/>
<Route
path="/signup"
component={SignUp} />
<Route
path="/signin"
component={SignIn}
/>
<Route
path="/books/home"
component={BookHome}
/> */}
<PublicRoute component={Home} restricted={false} path="/" exact />
<PublicRoute component={SignIn} restricted={true} path="/signin" exact />
<PrivateRoute component={BookHome} path="/books/home" exact />
</Switch>
);
}
}
export default Routes;
En mi componente PrivateRoute:
// React
import React , { useState, useEffect } from 'react';
// React-router-dom
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({component: Component, ...rest}) => {
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
const token = localStorage.getItem('token');
if(token !== null) {
setLoggedIn(true);
}
});
return(
<Route {...rest} render={props => (
loggedIn ? <Component {...props} /> : <Redirect to="/signin" />
)}
/>
)
}
export default PrivateRoute;
y en el publicRoute:
// React
import React, { useState, useEffect } from 'react';
// React-router-dom
import { Route, Redirect } from 'react-router-dom';
const PublicRoute = ({component: Component, restricted, ...rest}) => {
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
const token = localStorage.getItem('token');
if(token !== null) {
setLoggedIn(true);
}
});
return(
<Route {...rest} render={props => (
(loggedIn && restricted) ? <Redirect to="/books/home" /> : <Component {...props}/>
)}
/>
);
}
export default PublicRoute;
Aparte de esto tengo el metodo signIn en donde setea el token en local storage
y hace el push hacia la ruta /books/home
.
signIn = async(e) => {
e.preventDefault();
const { store: { loginData, loggedIn } } = this.state;
const { signinUser, history } = this.props;
const variables = {
email: loginData.email,
password: loginData.password
};
try {
const response = await signinUser({variables});
if(response) {
const { data: {signinUser:{token}} } = response;
localStorage.setItem('token', token);
/* history.push('/books/home'); */
}
} catch (error) {
console.log(error);
}
}
useEffect
, hay que configurarlos para que corran solo una vez (skip effects), en esta pregunta podrás ver la configuración deuseEffect
con skip effects, basta con especificar el array de dependencias vacío, dale un voto si fue de utilidad, saludosuseEffect
, voy a tratar de emular el error de mi lado, parece mas complicado de lo que pensamos.loggedIn
, pude darme cuenta que el problema puede estar en elredirect
, en esta publicación presentan un diseño muy parecido al que estas proponiendo, suerte.