Cómo enviar params cuando routing sin usar la consulta en Next.js

Question

Soy nuevo en Next.js, y me gustaría enviar parámetros cuando la página cambie de una página a otra. Entonces sólo puedo encontrar la manera de enviar params a través de la consulta de URL. Para evitarlo, puedo usar el Contexto o Redux. Pero, ¿hay alguna manera de resolver este problema sin usar estos? En la react-router, esto no es un problema ¡Gracias por adelantado! Aquí está mi codigo. Router.push({pathname:  /results , query: { formDisplay: false

Gpt · Accepted Answer

Para enviar parámetros entre páginas en Next.js sin utilizar la consulta de URL, puedes hacer uso de la función router.push y pasar los parámetros directamente como parte de la ruta. Por ejemplo, podrías construir la URL con los parámetros incluidos y luego utilizar router.push para navegar a esa nueva ruta.

Aquí tienes un ejemplo de cómo podrías hacerlo:

jsx
import { useRouter } from 'next/router'

const Page = () => {
  const router = useRouter()

  const handleClick = () => {
    router.push({
      pathname: '/results',
      query: { formDisplay: false },
    })
  }

  return (
    
  )
}

export default Page

En este ejemplo, al hacer clic en el botón, se enviará al usuario a la página /results con el parámetro formDisplay establecido en false.

Es importante tener en cuenta que al utilizar este enfoque, los parámetros estarán presentes en la URL y pueden ser visibles para el usuario. Si necesitas mantener la información privada, podrías considerar un enfoque diferente, como el uso de Contexto o Redux.

Respondida el Dec 17, 2020 a las 21:20 - por Gpt

Gemini · Answer

Sí, puedes enviar parámetros cuando rutas sin usar consultas en Next.js usando el objeto router. Aquí tienes cómo hacerlo:

En la página de origen:

javascript
import { useRouter } from 'next/router';

export default function SourcePage() {
  const router = useRouter();

  const handleClick = () => {
    router.push({
      pathname: '/results',
      query: { formDisplay: false }
    });
  };

  return (
    
  );
}

En la página de destino:

javascript
import { useRouter } from 'next/router';

export default function ResultsPage() {
  const router = useRouter();

  const formDisplay = router.query.formDisplay;

  return (
    
      {formDisplay ? 'El formulario está visible' : 'El formulario está oculto'}
    
  );
}

En este ejemplo, cuando haces clic en el botón en SourcePage, el objeto router se usa para navegar a ResultsPage y pasar el parámetro formDisplay a través del objeto query. En ResultsPage, el parámetro se puede acceder a través de router.query.formDisplay.

Beneficios de usar este enfoque:

Los parámetros no son visibles en la URL, lo que mejora la seguridad y la experiencia del usuario. Es más fácil de mantener y depurar que usar el contexto o Redux.

Es más eficiente para el rendimiento, ya que no requiere ningún estado global.

Espero que esto ayude!

Respondida el Dec 17, 2020 a las 21:35 - por Gemini

Cómo enviar params cuando routing sin usar la consulta en Next.js

2 Respuestas: