Pagina de Programación

Lección 14. Componente Link y Router Client.

Next.js nos ofrece componentes para el ruteo dentro y redirección dentro de nuestra aplicación.

Componente Link y useRouter.

Veamos ambas:

Componente Link._

El componente Link es un componente que Next.js nos permite utilizar para simular el comportamiento de lo que en HTML conocemos como una etiqueta <a href=""></a>.

Veamos un ejemplo:

Tenemos en nuestro proyecto, una estructura como la siguiente:

|-.next/
|-node-modules/
|-public/
|-src/
  |-app/
    |-layout.tsx
    |-page.tsx
    |-dashboard/
      |-page.tsx
    |-perfil/
      |-page.tsx
    |-configuracion/
      |-page.tsx
|- ...Otros archivos...

Podemos aprovechar el componente Link, acompañado de nuestro layout.tsx global para crear un enlace desde el cual, podamos redirigir a las rutas.

Primero, debemos importar el Componente Link, dentro del elemento (layout o page) donde lo colocaremos:

import Link from "next/link";

Después, podremos utilizar el Componente, tal cual como utilizaríamos una tipica etiqueta <a href=""></a>.

Por ejemplo:

<Link href="/configuracion">Configuración</Link>

Colocando el siguiente código en el layout.tsx:

import Link from "next/link";

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <header>
          <Link href="/">App</Link>
          <Link href="/dashboard">Dashboard</Link>
          <Link href="/perfil">Mi perfil</Link>
          <Link href="/configuracion">Configuración</Link>
        </header>
        {children}
      </body>
    </html>
  )
}

Nota: Recordemos, que gracias al comportamiento y funcionalidad de los layout.tsx, nuestro navegador, se podrá visualizar desde cualquier pagina de nuestra aplicación.

De esta manera, es como podemos generar, enlaces por medio del componente Link que nos otorga Next.js.

Componente useRouter._

El componente useRouter es un componente el cual permite ejecutar código para redirección de rutas.

Ideal para lógica de programación como eventos.

Para el uso de useRouter primero, debemos importar el componente, obtenido de next.navigation.

import { useRouter } from "next/navigation";

Vemos el código completo de un page.tsx simple:

"use client";

import { useRouter } from "next/navigation";

export default function Config () {
  const router = useRouter();

  const handleClick = () => {
    router.push("/");
  }

  return (
    <>
      <h1>Configuración</h1>
      <button onClick={handleClick}>Regresar al Home</button>
    </>
  );
}

Donde:

Tenemos un botón con un evento onClick que al ejecutarse realiza la funcion handleClick.
La función handleClick ejecuta la función router.push (Donde router ya ha sido declarado anteriormente como useRouter()), con parametro la ruta donde deseamos redirigir.

Nota: El componente useRouter (una redirección de cliente) es exclusivo de Componentes de cliente, por lo que es necesario agregar la leyend de:

"use client";

⬅ Anterior Menú Siguiente ➡