Recapitulación: Navegación
Parte de la sección Esenciales de Next.js del Journey de React de Coddy. Lección 38 de 47.
Desafío
IntermedioResumen del capítulo: una pequeña app, ambas direcciones de la URL: una navegación que lee dónde está y una página de menú filtrada por la cadena de consulta.
- En
components/Nav.jsx, llama ausePathname()y asigna a cada enlace la clase"nav-link active"cuando suhrefcoincida con la ruta actual, y"nav-link"sin cambios en caso contrario. Inicio es/; Menú es/menu. - En
app/menu/page.jsx, leecategorydesearchParams(recuerda que es una promesa) y muestra solo los platos coincidentes, o todos cuando no se proporciona ninguna categoría.
/menu?category=pizza debería mostrar 2 de los 4 platos, con el enlace Menú resaltado.
Pruébalo tú mismo
import './globals.css';
import Nav from '../components/Nav.jsx';
export const metadata = {
title: 'Coddy Eats',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Nav />
{children}
</body>
</html>
);
}Todas las lecciones de Esenciales de Next.js
4Servidor y Cliente
Dos tipos de componentesLectura del errorLa línea 'use client'Mantén las partes de cliente pequeñasServidor dentro de clienteResumen: Servidor y Cliente7Navegación del cliente
El enlace activoEnrutamiento programáticoFiltrado con la URLManejadores de rutasRecapitulación: Navegación