NavLink: active class, aria-current and end
On /blog/hello: Home is not active (/ is special), "Blog home" isn't either because of end, "Blog section" is (it matches the start of the path), and the function className replaced the default active class.
React Router maps URLs to components: <Routes> picks the best <Route> for the current URL, <Link> changes the URL without reloading, and <NavLink> knows when it points at the current page; apps wrap everything in <BrowserRouter>, while tests and this preview use <MemoryRouter>.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a three-page site (Home, Menu, Contact) with a NavLink nav where the current page is bold, inside a MemoryRouter that starts on /menu.
Make a NavLink whose text shows "(you are here)" when active, using the children function.
Rewrite this v6 code for React Router 8: import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
Explain it without notes
What does <BrowserRouter> do, and why do tests and this preview use <MemoryRouter>?
How does <Routes> decide which <Route> to render?
What is the difference between Link, NavLink and a plain <a> in a React Router app?
Describe React Router's three modes and when you'd pick each.
Preview
Console
Nothing logged yet.Expected console output
Home: class= aria-current=null
Blog home: class= aria-current=null
Blog section: class=active aria-current=page
Hello post: class=tab tab-on aria-current=page