React Router ⚛️

1. Setup & Basic Routes

A router's one job is to look at the current URL and show the matching component. You switch routing on by wrapping your whole app in <BrowserRouter> once (usually in main.jsx). Then you list your pages inside <Routes>, one <Route> per page, each with a path and the element to render. Read this worked example carefully — every line is commented.

// main.jsx — wrap your WHOLE app in <BrowserRouter> exactly once.
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>      {/* turns on client-side routing for everything inside */}
    <App />
  </BrowserRouter>
);

// App.jsx — map URL paths to components with <Routes> and <Route>.
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* path="/"  -> the homepage; element is the component to show */}
      <Route path="/"        element={<Home />} />
      <Route path="/about"   element={<About />} />
      <Route path="/contact" element={<Contact />} />
      {/* path="*" is the catch-all 404 — it MUST come last */}
      <Route path="*"        element={<NotFound />} />
    </Routes>
  );
}
// Visiting /about renders <About />. Visiting /banana renders <NotFound />.

The special path="*" route matches any URL no other route caught, so it's your 404 page — and it goes last. Now run the logic a router uses to pick a route. This is plain JS you can execute:

// === How a router decides which page to show ===
// React Router compares the current URL against each route's pattern,
// top to bottom, and renders the FIRST one that matches.

const routes = [
  { path: "/",        page: "Home" },
  { path: "/about",   page: "About" },
  { path: "/contact", page: "Contact" },
  { path: "*",        page: "NotFound" },   // catch-all, kept last
];

// A tiny matcher: "*" matches anything, otherwise it's an exact match.
function matchRoute(url) {
  for (const 
...

Your turn. The matcher below is almost done — fill in the one blank so unknown URLs fall through to the 404, then run it and check the output.

// 🎯 YOUR TURN — replace each ___ then press "Run".
// Goal: finish the matcher so unknown URLs fall through to the 404 page.

const routes = [
  { path: "/",      page: "Home" },
  { path: "/shop",  page: "Shop" },
  { path: "*",      page: "NotFound" },
];

function matchRoute(url) {
  for (const route of routes) {
    // 1) The wildcard "*" should match ANY url. Compare route.path to it.
    if (route.path === ___ || route.path === url) {  // 👉 the catch-all string
      return route.page;

...

2. Linking Between Pages

Inside a routed app you must never use a plain <a href="..."> to move between your own pages — that makes the browser throw your app away and reload the whole thing from the server, losing all React state. Use <Link to="..."> instead: it swaps the page in JavaScript, instantly. <NavLink> is the same thing but it knows when it points at the current page, so you can style the active link.

// Navbar.jsx — navigate WITHOUT a full page reload.
import { Link, NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      {/* <Link> swaps the page in JavaScript — React state survives. */}
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>

      {/* <NavLink> is a <Link> that KNOWS if it's the current page.
          The className function gives you { isActive } to style with. */}
      <NavLink
        to="/contact"
        className={({ isActive }) =>
          isActive ? 'font-bold text-blue-600' : 'text-gray-600'
        }
      >
        Contact
      </NavLink>
    </nav>
  );
}
// On /contact the Contact link is bold+blue; the others stay grey.
// Never write <a href="/about"> here — that reloads the whole app.

3. Dynamic Routes & URL Params

You don't write one route per user. Instead you put a placeholder in the path with a colon — /users/:userId — and that :userId matches whatever's in that slot. Inside the component you read it with the useParams() hook. The key you destructure must match the name after the colon, and the value always comes back as a string.

// 1) Declare a dynamic segment with a colon: :userId is a placeholder.
<Route path="/users/:userId" element={<UserProfile />} />

// 2) Read it inside the component with useParams().
import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId } = useParams();   // key MUST match the route: ":userId"
  // URL /users/42    -> userId is "42"   (always a string!)
  // URL /users/alice -> userId is "alice"
  return <h1>Profile for user {userId}</h1>;
}

// Multiple params work the same way:
<Route path="/products/:category/:id" element={<Product />} />
// URL /products/shoes/7 -> { category: "shoes", id: "7" }

Now run the actual logic useParams performs: it splits the route pattern and the real URL into pieces and, wherever the pattern has a :name, it grabs the value from the same slot. Fill in the three blanks:

// 🎯 YOUR TURN — this is the logic behind useParams().
// A route pattern and a real URL are split into pieces. Where the
// pattern piece starts with ":", the matching URL piece is a PARAM value.

const pattern = "/users/:userId/posts/:postId";
const url     = "/users/42/posts/7";

const patternParts = pattern.split("/");   // ["", "users", ":userId", "posts", ":postId"]
const urlParts      = url.split("/");      // ["", "users", "42", "posts", "7"]

const params = {};
for (let i = 0; i < patt
...

4. Programmatic Navigation

Sometimes you need to change pages from code rather than from a click — for example, redirecting to /dashboard after a successful login. The useNavigate() hook gives you a navigate function: call navigate('/somewhere') and you're there.

// useNavigate() lets you change the URL from CODE (not a click).
import { useNavigate } from 'react-router-dom';

function LoginForm() {
  const navigate = useNavigate();

  async function handleSubmit(e) {
    e.preventDefault();
    await logIn();                            // do the work first...
    navigate('/dashboard');                   // ...then send them there
  }

  return <form onSubmit={handleSubmit}>{/* ...inputs... */}</form>;
}

// Handy variations:
navigate('/dashboard', { replace: true });   // don't add to history (no "Back" to login)
navigate(-1);                                 // go back one page, like the browser's Back button

Use { replace: true } after login so the login page isn't left in the history (otherwise pressing Back drops the user right back on it). And navigate(-1) is the same as clicking the browser's Back button.

5. Nested Routes & Outlet

Most apps share a frame across several pages — a dashboard with a fixed sidebar, say. Rather than repeat that sidebar in every component, you nest child routes inside a parent route. The parent renders a shared layout containing an <Outlet />, and React Router drops the matched child page into that slot. The special index route is what shows at the parent's exact path.

// Nested routes share a layout. The parent renders an <Outlet />
// and the matched CHILD route appears in that slot.
import { Outlet, Link } from 'react-router-dom';

// App.jsx — children are nested INSIDE the parent <Route>:
<Routes>
  <Route path="/dashboard" element={<DashboardLayout />}>
    <Route index            element={<DashboardHome />} />   {/* /dashboard */}
    <Route path="settings"  element={<Settings />} />        {/* /dashboard/settings */}
    <Route path="profile"   element={<Profile />} />         {/* /dashboard/profile */}
  </Route>
</Routes>

// DashboardLayout.jsx — the shared frame:
function DashboardLayout() {
  return (
    <div className="dashboard">
      <aside>
        <Link to="settings">Settings</Link>   {/* relative link */}
        <Link to="profile">Profile</Link>
      </aside>
      <main>
        <Outlet />   {/* the child route (Settings / Profile / …) renders HERE */}
      </main>
    </div>
  );
}
// The sidebar stays put; only the <Outlet /> content changes between pages.

Now /dashboard/settings renders DashboardLayout with Settings inside its <Outlet />. The sidebar never re-mounts; only the outlet's contents change as you click around.

// 🎯 MINI-CHALLENGE: build a mini "navigate()" history stack
//
// React Router keeps a history of URLs so the Back button works.
// Simulate it with a plain array.
//
// 1. Start with: const history = ["/"];
// 2. Write navigate(url)        -> push url onto history, print "Now at: <url>"
// 3. Write navigateReplace(url) -> REPLACE the last entry (no new history),
//                                  then print "Replaced -> <url>"
// 4. Write goBack()             -> remove the last entry and pri
...