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 aplicación, ambas direcciones de la URL: una navegación que lee dónde se encuentra y una página de menú filtrada por la cadena de consulta.
- En
components/Nav.jsx, llama ausePathname()y asigna a cada enlace el className"nav-link active"cuando suhrefcoincida con la ruta actual, y simplemente"nav-link"en caso contrario. Home es/, Menu es/menu. - En
app/menu/page.jsx, leecategorydesearchParams(recuerda que es una promesa) y muestra solo los platos que coincidan, o todos ellos cuando no se proporcione ninguna categoría.
/menu?category=pizza debería mostrar 2 de los 4 platos, con el enlace de Menu 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