Recapitulación: Enrutamiento
Parte de la sección Esenciales de Next.js del Journey de React de Coddy — lección 10 de 47.
Desafío
IntermedioResumen 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.
- Crea
app/about/page.jsx. Exporta por defecto (default) un componente que devuelva un<h1>conid="about-title"y el texto exactoAbout us. - En
app/page.jsx, importaLinkdenext/linky añade un enlace a/aboutconid="to-about". - Crea la ruta dinámica
app/menu/[slug]/page.jsx: un componenteasyncque espere (await) aparamsy renderice elslugcoincidente dentro de un<h1>conid="dish".
Las pruebas hacen clic en tu enlace y después visitan dos platos diferentes esperando dos encabezados distintos.
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
2Enrutamiento y enlaces
Las carpetas son rutasRutas anidadasEnlaces entre páginasRutas dinámicasPáginas no encontradasRecapitulación: Enrutamiento