Menu
Coddy logo textTech

Recapitulación: Enrutamiento

Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 10 de 47.

challenge icon

Desafío

Intermedio

Recapitulación del capítulo: convierte una aplicación de una sola página en un sitio pequeño utilizando todo lo aprendido en este capítulo.

  1. En app/about/page.jsx (que ya aparece en la lista de archivos), haz que el componente devuelva un <h1> con id="about-title" y el texto exacto About us.
  2. En app/page.jsx, importa Link desde next/link y añade un enlace a /about con id="to-about".
  3. La ruta dinámica app/menu/[slug]/page.jsx ya está creada, pero siempre muestra pizza. Haz que su componente sea async para que espere a params y muestre el slug coincidente dentro de un <h1> con id="dish".

Las pruebas hacen clic en tu enlace, después visitan dos platos diferentes y esperan dos encabezados diferentes.

Pruébalo tú mismo

import './globals.css';

export const metadata = {
    title: 'My App',
};

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

Todas las lecciones de Esenciales de Next.js