Redireccionando en React Router 6 y ReactJS 17
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;
}
}
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 bibliotecareact-router-dom
.Aquí tienes un ejemplo de implementación:
Dentro de la función
sendSms
, puedes llamar ahistory.push('/')
para redirigir al usuario a la página principal. Asegúrate de importar el ganchouseHistory()
en la parte superior de tu archivo utilizandoimport { 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 objetosmatch
,location
ehistory
proporcionados porreact-router-dom
. Aquí tienes un ejemplo utilizandowithRouter()
:Esto envuelve el componente
MyComponent
con el componente de orden superiorwithRouter()
, permitiéndole acceder al objetomatch
como una prop. Luego puedes utilizarmatch.params.id
para obtener el parámetro de ID de la URL.