Ir a la página de inicio
Home / Apuntes de Nextjs (Desde Cero) en español
Compartir en twitter

Enrutamiento, Uso del hook useRouter

¿Cómo funciona es el hook useRouter?

El hook useRouter permite de cambiar rutas de manera programática.

'use Client'

import { useRouter } from 'next/navigation'

export default function Page() {
    const router = useRouter()

    return (
        <button type="button" onClick={() => router.push('/dashboard')}>
            Dashboard
        </button>
    )
}

Se recomienda utilizar siempre el componente Link para navegar entre rutas, a menos que tengas un requerimiento específico para utilizar useRouter.

Opciones del hook useRouter

push

Realiza una navegación del lado del cliente a la ruta proporcionada. Agrega una nueva entrada en el historial del navegador.

router.push(href: string, { scroll: boolean })

replace

Refresca la ruta actual. Realiza una nueva solicitud al servidor, vuelve a obtener las solicitudes de datos y vuelve a renderizar los Componentes del Servidor. El cliente fusionará la carga útil actualizada del Componente del Servidor de React sin perder el estado de React del lado del cliente no afectado (por ejemplo, useState) o el estado del navegador (por ejemplo, la posición de desplazamiento).

router.replace()

prefetch

Realiza una precarga de la ruta proporcionada para transiciones más rápidas del lado del cliente.

router.prefetch(href: string)

back

Navega de regreso a la ruta anterior en el historial del navegador.

router.back()

El componente Link, realiza el prefetch de manera automática para las rutas, cuando dicho componente se muestra (es visible) en el viewport. Las función refresh() pueden provocar el mismo resultado si las peticiones fetch se encuentran en el cache. Otras funciones dinámicas como cookies y headers pueden también generar un cambio en la respuesta.

Cambios de next/router a next/navigation

  • El hook useRouter debe ser importado de next/navigation y no de next/router cuando se utilice AppRouter.
  • El pathname tiene que ser removido y reemplazado por usePathname().
  • El objeto query ha sido reemplazado por useSearchParams()
  • El objeto router.events ha sido eliminado.

Ejemplos

Eventos del router

Es posible vigilar los cambios en las páginas mediante un hook que monitorea a usePathname y useSearchParams.

// app/components/navigation-events.tsx
'use client'

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export function NavigationEvents() {
    const pathname = usePathname()
    const searchParams = useSearchParams()

    useEffect(() => {
        const url = `${pathname}?${searchParams}`
        console.log(url)
        // ahora se puede usar la url
    }, [pathname, searchParams])

    return null
}

Que puede ser importado en un layout.

// app/layout.tsx
import { Suspense } from 'react'
import { NavigationEvents } from './components/navigation-events'

export default function Layout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}

                <Suspense fallback={null}>
                    <NavigationEvents />
                </Suspense>
            </body>
        </html>
    )
}

El componente <NavigationEvents> está envuelto en un Suspense porque useSearchParams() provoca la renderización del lado del cliente hasta el alcance del Suspense más cercano durante la renderización estática.

Deshabilitar restauración de scroll

De forma predeterminada, Next.js desplazará hacia la parte superior de la página al navegar a una nueva ruta. Puedes deshabilitar este comportamiento pasando scroll: false a router.push() o router.replace().

'use client'

import { useRouter } from 'next/navigation'

export default function Page() {
    const router = useRouter()

    return (
        <button
            type="button"
            onClick={() => router.push('/dashboard', { scroll: false })}
        >
            Dashboard
        </button>
    )
}

Conclusiones

En resumen, el hook useRouter de Next.js es una herramienta poderosa para manejar la navegación programática en aplicaciones web. Aunque se recomienda usar el componente Link para la mayoría de las navegaciones, useRouter ofrece flexibilidad adicional para casos específicos. Las funciones como push, replace, prefetch y back permiten un control detallado sobre la navegación y el historial del navegador. Además, la transición de next/router a next/navigation introduce cambios importantes que mejoran la funcionalidad y el rendimiento. Implementar estos conceptos correctamente puede mejorar significativamente la experiencia del usuario en tu aplicación.

Otros Artículos