Cómo usar el enrutador Next.js

Aprenda a usar elnext/routerpaquete para controlar rutas en Next.js

Envincular dos páginas en Next.js usando Linkvimos cómo usar el componente Link para manejar de manera declarativa el enrutamiento en las aplicaciones Next.js.

Es muy ú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, proporcionado en elnext/routerpaquete, y llama a supush()método.

A continuación, se muestra un ejemplo de cómo acceder al enrutador:

import { useRouter } from 'next/router'

export default () => { const router = useRouter() //… }

Una vez que obtenemos el objeto del enrutador invocandouseRouter(), 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 sencilla de garantizar esto es encapsular las llamadas en eluseEffect()Reaccionar gancho, o dentrocomponendDidMount()en React componentes con estado.

Los que probablemente usará más sonpush()yprefetch().

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, lo que resulta útil cuando no tenemos unaLinketiqueta que maneja 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 escuchareventos de cambio de ruta.

Descarga mi gratisManual de Next.js


Más próximos tutoriales: