Cómo utilizar el enrutador Next.js

 

 

 

Como utilizar el enrutador next js 1

Aprenda a utilizar el paquete `next/router` para controlar rutas en Next.js

Al vincular dos páginas en Next.js usando Link, vimos cómo usar el componente Link para manejar de forma declarativa el enrutamiento en 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, puedes acceder directamente al enrutador Next.js, proporcionado en el next/routerpaquete, y llamar a su push()método.

A continuación se muestra 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 se deben usar en el código orientado al frontend. La forma más fácil de garantizar esto es encapsular las llamadas en el useEffect()gancho de React o dentro componendDidMount()de los componentes con estado de React.

Los que probablemente utilizarás más son push()y prefetch(). Todo sobre el cafe

push()nos permite activar programáticamente un cambio de URL en el frontend:

router.push('/login')

prefetch()nos permite precargar programáticamente una URL, lo cual es útil cuando no tenemos una Linketiqueta que maneje automáticamente la precarga por nosotros:

router.prefetch('/login')

Ejemplo completo:

import { useRouter } from 'next/router'export default () = { const router = useRouter() useEffect(() = { router.prefetch('/login') })}

También puede utilizar el enrutador para escuchar eventos de cambio de ruta .

Tips de Next.js (enrutador de páginas)




Tal vez te puede interesar:

  1. Introducción a React
  2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
  3. Cómo cambiar el valor de un nodo DOM
  4. Cómo comprobar si un elemento DOM tiene una clase

Cómo utilizar el enrutador Next.js

Al vincular dos páginas en Next.js usando Link, vimos cómo usar el componente Link para manejar de forma declarativa el enrutamiento en aplicaciones Next.js.

programar

es

https://aprendeprogramando.es/static/images/programar-como-utilizar-el-enrutador-next-2184-0.jpg

2024-11-03

 

Como utilizar el enrutador next js 1
Como utilizar el enrutador next js 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences