es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Redireccionando en React Router 6 y ReactJS 17

28 Jul, 2023 Programación

Quiero redirigir al usuario a la página de inicio después de un inicio de sesión exitoso, pero nada funciona.
Este es mi componente Login.js
Además, no pude obtener el parámetro de la URL en los componentes basados en clases y me vi obligado a usar un componente funcional y usar let params=useParams(); para obtener los parámetros de la URL.

function Login(props) {
  const sendSms = async (e=null) => {
          if (typeof(securityCode) !=='undefined' && securityCode.toString().length === 6) {
      const response = await fetch('http://localhost:8000/api/login/' ,{
        method: "post",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          mobile,
          securityCode
        })
      });
        const data = await response.json();
        let result=data.result;
          let message=data.message;
          if (result === 'success') {
          clearInterval(sms_interval);
           setToken(data.data);
           return navigate("/", { replace: true }); //importante
            return false;
          } else {
            setAlertClass('alert-danger');
            setAlertMessage(message);
          }

        return false;
    }
         fetch('http://localhost:8000/api/send_sms/' ,{
        method: "post",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          mobile
        })
      })
        .then(response => response.json())
        .then(data => { 
          let result=data.result;
          let message=data.message;
          if (result === 'success') {

            let sms_timer = 120;
            setSmsInteral(setInterval(function () {
              if (sms_timer > 0) {

            }, 1000)
            );
          } else {
                      }

        });

    return false;
  }
}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para redirigir al usuario a la página principal después de un inicio de sesión exitoso, puedes utilizar el gancho useHistory() proporcionado por la biblioteca react-router-dom.

    Aquí tienes un ejemplo de implementación:

    import { useHistory } from 'react-router-dom';

function Login(props) {
  const history = useHistory();

  const sendSms = async (e=null) => {
    // ... código existente ...

    if (result === 'success') {
      clearInterval(sms_interval);
      setToken(data.data);
      history.push('/');
    } else {
      setAlertClass('alert-danger');
      setAlertMessage(message);
    }
  }

  // ... código existente ...
}

    Dentro de la función sendSms, puedes llamar a history.push('/') para redirigir al usuario a la página principal. Asegúrate de importar el gancho useHistory() en la parte superior de tu archivo utilizando import { useHistory } from 'react-router-dom'.

    En cuanto a cómo obtener los parámetros de URL en componentes basados en clases, puedes pasarlos como props o utilizar el componente de orden superior withRouter() para acceder a los objetos match, location e history proporcionados por react-router-dom. Aquí tienes un ejemplo utilizando withRouter():

    import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  render() {
    const { match } = this.props;

    return (
      <div>
        El parámetro ID es: {match.params.id}
      </div>
    );
  }
}

export default withRouter(MyComponent);

    Esto envuelve el componente MyComponent con el componente de orden superior withRouter(), permitiéndole acceder al objeto match como una prop. Luego puedes utilizar match.params.id para obtener el parámetro de ID de la URL.

Comments are closed.