Recapitulando: Navegação
Parte da seção Essenciais do Next.js do Journey de React da Coddy. Lição 38 de 47.
Desafio
MédioRecapitulação do capítulo: um pequeno app, ambas as direções da URL: uma navegação que lê onde está e uma página de menu filtrada pela string de consulta.
- Em
components/Nav.jsx, chameusePathname()e atribua a cada link a classe"nav-link active"quando o seuhrefcorresponder ao caminho atual, e apenas"nav-link"caso contrário. Home é/, Menu é/menu. - Em
app/menu/page.jsx, leiacategorydesearchParams(lembre-se de que é uma promise) e mostre apenas os pratos correspondentes, ou todos quando nenhuma categoria for informada.
/menu?category=pizza deve mostrar 2 dos 4 pratos, com o link Menu destacado.
Experimente você mesmo
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 as lições de Essenciais do Next.js
1Por que usar o Next.js
O que o Next.js adicionaA pasta AppSua primeira páginaRecapitulação: Por que usar o Next.js4Servidor & Cliente
Dois Tipos de ComponenteLendo o ErroA Linha 'use client'Mantenha as Partes de Cliente PequenasServidor Dentro do ClienteRecapitulação: Servidor & Cliente7Navegação do Cliente
O Link AtivoRoteamento ProgramáticoFiltrando com a URLManipuladores de RotaRecapitulando: Navegação