4-Navegación

por Ariel

última actualización: 4-12-2025

Link

Este es el componente que debemos usar para crear enlaces de navegación interna. Acepta una prop `to` que indica la ruta a la que se quiere navegar, y que se obtiene automáticamente antes de la navegación.

En este proyecto, podemos ver el uso de `<Link>` en el header para navegar entre las diferentes páginas:

1// src/components/Header.tsx
2import { Link } from "waku"
3export default function Header() {
4
5  return (
6    <header className="bg-black text-white h-10 flex items-center justify-center">
7      <nav className="w-full flex items-center justify-between gap-10 px-4 max-w-4xl mx-auto">
8        <Link to="/temas" className="hover:text-amber-300! transition-all duration-300">Temas</Link>
9        <Link to="/" className="hover:text-amber-300! transition-all duration-300">Inicio</Link>
10        <Link to="/acerca-de" className="hover:text-amber-300! transition-all duration-300">Acerca De</Link>
11      </nav>
12    </header>
13  )
14};
15

useRouter

El hook `useRouter` se puede usar para inspeccionar la ruta actual y realizar navegaciones programáticas.

Propiedades del router

El objeto router tiene dos propiedades relacionadas a la ruta actual:

  • path: tipo string.
  • query: tipo string.

Métodos del router

El objeto enrutador también contiene varios métodos para la navegación programática:

  • → router.push(to: string) - Navegar a la ruta proporcionada
  • → router.prefetch(to: string) - Precargar la ruta proporcionada
  • → router.replace(to: string) - Reemplazar la entrada actual del historial
  • → router.reload() - Recargar la ruta actual
  • → router.back() - Navegar a la entrada anterior en el historial de sesiones
  • → router.forward() - Navegar a la siguiente entrada en el historial de sesiones

Acá un ejemplo de uso de `useRouter`, donde vemos `path`, `query`, `router.push()` y `router.reload()`:

1// src/components/Router.tsx
2"use client";
3
4import { useRouter } from "waku";
5
6export default function Router() {
7  const { path, query } = useRouter();
8  const router = useRouter();
9
10  return (
11    <section
12      className="flex flex-col justify-center items-center my-10 text-xl"
13    >
14      <p className="mb-6">Ruta actual: {path}</p>
15      <p className="mb-6">Parámetros de consulta: {JSON.stringify(query)}</p>
16
17      <button
18        className="text-black py-5 px-4 mb-4 border-2 border-red-600 bg-amber-400 rounded"
19        onClick={() => router.push("/temas/4-navegacion")}
20      >
21        Ir al tema 4-navegación
22      </button>
23      <button
24        className="text-black py-5 px-4 border-2 border-red-600 bg-amber-400 rounded"
25        onClick={() => {
26          alert("Recargando...");
27          router.reload();
28        }}
29      >
30        Recargar
31      </button>
32    </section>
33  );
34};
35

Puede ver la página que usa este componente aquí acá → página que usa el componente Router.

Nota: al ser un hook, solo podemos usarlo en Componentes de Cliente.

← 3-Enrutamiento5-Manejo de errores →