0

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);
    }
}
7
  • 1
    Puede ser la configuración de tus hooks useEffect, hay que configurarlos para que corran solo una vez (skip effects), en esta pregunta podrás ver la configuración de useEffect con skip effects, basta con especificar el array de dependencias vacío, dale un voto si fue de utilidad, saludos
    – g.4
    Commented el 8 feb. 2021 a las 0:15
  • Hola gracias por la pronta respuesta, pero no me ha funcionado. incluso intente cambiar de tipo de componente a uno de clase. igual presenta ese loop con la ruta en la url
    – Richi
    Commented el 8 feb. 2021 a las 15:23
  • Algo que he visto en muchos casos, es que los loops son provocados por useEffect, voy a tratar de emular el error de mi lado, parece mas complicado de lo que pensamos.
    – g.4
    Commented el 8 feb. 2021 a las 16:28
  • Si está medio raro este bug, es como si de alguna forma verificará token y seteare la variable loggedIn a true y falso todo el tiempo
    – Richi
    Commented el 8 feb. 2021 a las 17:40
  • 1
    Intenté reproducir el error sin éxito, pero al despejar las banderas loggedIn, pude darme cuenta que el problema puede estar en el redirect, en esta publicación presentan un diseño muy parecido al que estas proponiendo, suerte.
    – g.4
    Commented el 8 feb. 2021 a las 23:11

1 respuesta 1

0

Se pudo llegar a una respuesta, que me permitio subsanar el problema de buena forma y esta solucion (gracias a la ayuda de @g.4) fue cambiar el <Redirect to=""> en el condicional ternario para la condicion true por un callback a una funcion que redirecciona con el Redirect:

// 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);
    }
}, []);

const redirectToSignIn = () => {
    <Redirect to="/signin" />
}

return(
    <Route {...rest} render={props => (
        loggedIn ? <Component {...props} /> : redirectToSignIn()
     )} 
    />
)
}

export default PrivateRoute;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.