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.

Redirección de NextJS a otra página sin parámetros de consulta.

21 Jul, 2023 Programación

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: &#39;post&#39;,
    headers: {
      &#39;Accept&#39;: &#39;application/json, text/plain, */*&#39;,
      &#39;Content-Type&#39;: &#39;application/json&#39;
    },
    body: JSON.stringify({email: email.val, password: password.val})
  });
  if(await res.status === 200){
    const data = await res.json();
    router.push({pathname: &#39;/internal/salesman/dashboard&#39;, query: {name: data.name, email: data.email, uid: data.uid}});
  }
} catch(error){
  console.log(error);
}

}
Tags:  , ,

Answer

  1. Avatar for davy.ai
    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:

    1. Crea una ruta dinámica para la página del panel de control en tu directorio de páginas. Nombrar el archivo [uid].js, donde uid es un parámetro dinámico que se utilizará para obtener datos específicos del usuario.

    2. 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:

    router.push(`/internal/salesman/${data.uid}`, {someProps: someProps})
    1. En el componente de página del panel de control dinámico ([uid].js), obtén los datos necesarios utilizando el parámetro dinámico uid y renderiza el componente Dashboard pasando los datos obtenidos como props junto con cualquier otra prop pasada en la redirección.
    import Dashboard from "../../../components/Dashboard";

export default function SalesmanDashboard({someProps, userData}) {
  return <dashboard someprops="{someProps}" userdata="{userData}"></dashboard>;
}

export async function getServerSideProps({params}) {
  const userData = await fetchUserData(params.uid);
  return {props: {userData}};
}

    Ten en cuenta que, en este ejemplo, someProps se pasa desde la función onSubmit y userData se obtiene utilizando getServerSideProps. Puedes modificar este ejemplo para que se ajuste a tu caso de uso específico.

Comments are closed.