Route ranking: the best match wins, not the first
Four separate memory routers, one per URL. Even with * written first, /teams/new picks the static route and /teams/42 the dynamic one. * only wins when nothing else matches.
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
/teams matched All teams
/teams/new matched New team form (static)
/teams/42 matched One team (:teamId)
/players matched Not found (*)