Routes, Link, and why a plain <a> is wrong
The plain <a> is ignored by the router. In a real browser it would reload the whole page from the server; this preview only logs (link to /about). <Link> changes the route in place.
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
plain <a> -> / Home
<Link> -> /about About us