Recap: Navigation
Part of the Next.js Essentials section of Coddy's React journey — lesson 38 of 47.
Challenge
MediumChapter recap: one small app, both directions of the URL: a nav that reads where it is, and a menu page filtered by the query string.
- In
components/Nav.jsx, callusePathname()and give each link the className"nav-link active"when itshrefmatches the current path, and plain"nav-link"otherwise. Home is/, Menu is/menu. - In
app/menu/page.jsx, readcategoryout ofsearchParams(remember it's a promise) and show only the matching dishes, or all of them when no category is given.
/menu?category=pizza should show 2 of the 4 dishes, with the Menu link highlighted.
Try it yourself
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>
);
}All lessons in Next.js Essentials
4Server & Client
Two Kinds of ComponentReading the ErrorThe 'use client' LineKeep Client Parts SmallServer Inside ClientRecap: Server & Client7Client Navigation
The Active LinkProgrammatic RoutingFiltering with the URLRoute HandlersRecap: Navigation