Post Top Ad

Your Ad Spot

sábado, 28 de diciembre de 2019

Cómo usar el enrutador Next.js

Al vincular dos páginas en Next.js usando Link , vimos cómo usar el componente Link para manejar declarativamente el enrutamiento en las aplicaciones de Next.js.
Es realmente útil administrar el enrutamiento en JSX, pero a veces es necesario activar un cambio de enrutamiento mediante programación.
En este caso, puede acceder al enrutador Next.js directamente, provisto en el next/routerpaquete, y llamar a su push()método.
Aquí hay un ejemplo de acceso al enrutador:
import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()
  //...
}
Una vez que obtenemos el objeto enrutador invocando useRouter(), podemos usar sus métodos.
Este es el enrutador del lado del cliente, por lo que los métodos solo deben usarse en el código frontal. La forma más fácil de garantizar esto es envolver las llamadas en el useEffect()enlace React, o dentro componendDidMount()de React con componentes con estado.
Los que probablemente usarás más son push()prefetch().
push() nos permite activar programáticamente un cambio de URL, en la interfaz:
router.push('/login')
prefetch()nos permite buscar previamente una URL mediante programación, útil cuando no tenemos una Linketiqueta que maneje automáticamente la búsqueda previa para nosotros:
router.prefetch('/login')
Ejemplo completo:
import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  useEffect(() => {
    router.prefetch('/login')
  })
}
También puede usar el enrutador para escuchar los eventos de cambio de ruta .

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas