Récapitulatif : Navigation
Fait partie de la section L'essentiel de Next.js du Journey React de Coddy — leçon 38 sur 47.
Défi
MoyenRécapitulatif du chapitre : une petite application, les deux directions de l'URL : une navigation qui lit où elle se trouve, et une page de menu filtrée par la chaîne de requête (query string).
- Dans
components/Nav.jsx, appelezusePathname()et donnez à chaque lien laclassName"nav-link active"lorsque sonhrefcorrespond au chemin actuel, et simplement"nav-link"sinon. L'accueil est/, leMenuest/menu. - Dans
app/menu/page.jsx, lisezcategorydepuissearchParams(rappelez-vous qu'il s'agit d'une promise) et affichez uniquement les plats correspondants, ou tous les plats lorsqu'aucune catégorie n'est fournie.
/menu?category=pizza devrait afficher 2 des 4 dishes, avec le link Menu mis en évidence.
Essayez vous-même
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>
);
}Toutes les leçons de L'essentiel de Next.js
1Pourquoi Next.js
Ce que Next.js apporteLe dossier AppVotre première pageRécapitulatif : Pourquoi Next.js4Serveur & Client
Deux types de composantsLire l'erreurLa ligne 'use client'Garder les parties client de petite tailleServeur dans le clientRécapitulatif : Serveur & Client7Navigation côté client
Le lien actifRoutage programmatiqueFiltrage avec l'URLGestionnaires de routesRécapitulatif : Navigation2Routage et liens
Les dossiers sont des routesRoutes imbriquéesLier des pagesRoutes dynamiquesPages non trouvéesRécapitulatif : Routage