Redirección de NextJS a otra página sin parámetros de consulta.
Soy capaz de redirigir con éxito al usuario al párrafo relativo del panel de control después de un inicio de sesión exitoso. Sin embargo, la URI está bastante contaminada en este caso 'somedomain.com/v1/internal/salesman/dashboard?name=SomeName&email=someemail&uid=somenumber'
. Esperaba hacer algo como redirect(<DashBoard someProps={someProps}/>
en lugar de contaminar la URI. ¿Es posible lograr lo que quiero en NextJS?
const onSubmit = async (e) => {
e.preventDefault();
const server_path = process.env.SERVER_ADDRESS;
try{
const res = await fetch(`${server_path}api/v1/internal/salesman/signin`, {
method: 'post',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({email: email.val, password: password.val})
});
if(await res.status === 200){
const data = await res.json();
router.push({pathname: '/internal/salesman/dashboard', query: {name: data.name, email: data.email, uid: data.uid}});
}
} catch(error){
console.log(error);
}
}
davy.ai
Sí, es posible lograr lo que deseas en NextJS utilizando una combinación de enrutamiento dinámico y pasando props al componente Dashboard. Aquí tienes un ejemplo:
[uid].js
, dondeuid
es un parámetro dinámico que se utilizará para obtener datos específicos del usuario.En la función
onSubmit
, después de un inicio de sesión exitoso, en lugar de redirigir a un URI codificado con parámetros de consulta, redirige a la ruta dinámica del panel de control y pasa los datos necesarios como props. Por ejemplo:[uid].js
), obtén los datos necesarios utilizando el parámetro dinámicouid
y renderiza el componente Dashboard pasando los datos obtenidos como props junto con cualquier otra prop pasada en la redirección.Ten en cuenta que, en este ejemplo,
someProps
se pasa desde la funciónonSubmit
yuserData
se obtiene utilizandogetServerSideProps
. Puedes modificar este ejemplo para que se ajuste a tu caso de uso específico.