0

Como bien dice la pregunta, quiero que al renderizarse un componente se verifique el valor de una variable, y depende de ello redireccionar a un sitio u otro. Lo que tengo es:

import React, { useEffect } from 'react';
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom';

const Home = ({ loggedIn }) => {

  useEffect(() => {
    console.log(loggedIn);
  }, [])

  return (
    <div className='row'>
      <div className='col-12'>
        <p>Home</p>
      </div>
    </div>
  );
};

const mapStateToProps = state => ({
  loggedIn: state.auth.isLoggedIn
})

export default connect(mapStateToProps)(Home)

Cuando yo entro al sitio recibo correctamente el valor de la variable loggedIn en consola. Ahora, quisiera ejecutar algo así:

    useEffect(() => {
      loginRedirect();
    },[])

    const loginRedirect = () =>{
     return loggedIn ? <Redirect to='/profile' /> : <Redirect to='/registrar' />
    }

Es decir, verificar la variable y redireccionar a profile o a registrar. Pero recibo el error:

React Hook useEffect has a missing dependency: 'loginRedirect'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Supongo que estoy cerca de la solución pero estoy implementando algo mal.

Agradezco cualquier sugerencia.

1 respuesta 1

2

Para usar el Componente Redirect, necesitas incluirlo en el return de tu componente, usarlo dentro del useEffect no tendrá el resultado que esperas (no va a renderizar nada). Recuerda el principio del hook:

El Hook de efecto te permite llevar a cabo efectos secundarios en componentes funcionales

Por lo tanto, úsalo cuando quieras preparar datos para mostrar (como ejemplo, llamar datos de una api), o bien para acciones "estéticas" (como cambiar el título de la pestaña, manejar estados de "Cargando", etc.).

En tu caso puedes hacerlo de varias maneras, pero sinceramente yo no usaría useEffect para ello; se puede hacer simplemente de la siguiente manera:

const Home = ({ loggedIn }) => {
  return loggedIn ? <Redirect to='/profile' /> : <Redirect to='/registrar' />;
};

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.