15. Routing the Learning Tracker

Written by Eli Ganim

In the previous chapter, the Learning Tracker gained an app-wide preference. It’s still missing something more basic that users expect from every web app: places. The catalog, the plan and the form all live in one long scroll, the address bar reads / forever, and there’s no way to bookmark a course or send someone a link to it.

Client-side routing fixes that. The app stays a single page technically — no full page loads — but a router keeps the URL and the UI in sync: Different addresses render different components, the back button works, and every screen becomes shareable. That’s a different job than Chapter 5’s conditional rendering, which switches content within a place; routing creates the places themselves.

You’ll add React Router, carve the app into Catalog, Course Details and My Learning pages under a shared layout, read your first route parameter — with the suspicion URL data deserves — and finish with a proper Not Found page for everything else.

Installing the Router

React Router is the book’s first third-party dependency, and it arrives the same way React did in Chapter 1. In a terminal, stop the dev server with Ctrl-C, then run in the project folder:

npm install react-router

npm downloads the package, records it in package.json — you’ll see "react-router": "^8.2.0" or newer among the dependencies — and locks the exact version. Start the dev server again with:

npm run dev

The router needs to own the URL from the top of the tree, beside your other app-wide wrapper. In src/main.tsx, add the import above the ThemeProvider line:

import { BrowserRouter } from 'react-router'

BrowserRouter is the flavor of router that uses real URLs — the kind you can bookmark. Wrap the app with it, inside the theme provider:

<StrictMode>
  <ThemeProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ThemeProvider>
</StrictMode>,

Save — no visible change, but every component below App can now ask about the URL. Here’s the destination structure, worth seeing before building it:

Read it top-down. A single layout wraps everything, so the header and navigation render once and stay put. Inside it sit four pages, each claiming an address — / for the catalog, /courses/:courseId for a single course, /my-learning for the plan, and * for anything that matches nothing else. You’ll build the layout first, fill it with pages, then hang addresses on them.

Building the Layout

Every page shares the header and navigation; only the middle changes. Routers model that as a layout route — a component rendering the shared frame with an Outlet marking where the current page plugs in. Create src/components/Layout.tsx:

import { NavLink, Outlet } from 'react-router'
import PageHeader from './PageHeader.tsx'

type LayoutProps = {
  favoriteCount: number
}

function navLinkClass({ isActive }: { isActive: boolean }) {
  return isActive ? 'nav-link active' : 'nav-link'
}

function Layout({ favoriteCount }: LayoutProps) {
  return (
    <>
      <PageHeader favoriteCount={favoriteCount} />
      <nav className="main-nav" aria-label="Main">
        <NavLink to="/" className={navLinkClass} end>
          Catalog
        </NavLink>
        <NavLink to="/my-learning" className={navLinkClass}>
          My Learning
        </NavLink>
      </nav>
      <main>
        <Outlet />
      </main>
    </>
  )
}

export default Layout

Ghhau heuvul kiomaj gakax wepu. BacBoml ob o giyy jxuc zmugx xtegrar umw bicnodoteey ribwzar fbi pincavs ULG — ant cpozkGefo vmor ispehrl u pupvteuw xaxeuruhm akIlloqo, zi cco vygfiyg bihbajw jozaqunoic aeyogahugavjb. Kju etz cqag ab xju Watufod hoxt zouqb “ebrexi uyny nday yti ADJ at eqovqqm /” — tejqouv ot, / wmaqukiy oqeqf ucjyaww ekb xvo roqp qiebj niduj cet.

Akb Oeytuw or ksa bufxof: Tfubcevav wofa bto ALR tetocwp satcikq oqokcjh bqupe, okdeju cci kesooq’w fael. Hoqetcag Qhelreh 5’q vabklurw loxa — jpug baov ej ataum pu pibasa bno iqtc joim, wosumt timu fvom Ezk.

Tuhe ock bob. Wapxunv at nsqeij mqonhah ris: Viluak.zsc nupyagik, yad lanpexy aytisnn as asdek vuo muszuxa zsu toatus, ma gxu ijc ykexj vigwolg mjpiozw qke enw luvslu-yuxi Adh.

Carving Out the Pages

The plan: App keeps every piece of state and every handler — nothing about state management changes today — while its JSX splits into page components that receive what they need as props. Start with the simplest. Create a folder src/pages with NotFoundPage.tsx:

import { Link } from 'react-router'

function NotFoundPage() {
  return (
    <div className="not-found">
      <h2>There's nothing here</h2>
      <p>That address doesn't match any page in the app.</p>
      <Link to="/">Back to the catalog</Link>
    </div>
  )
}

export default NotFoundPage

Womv um nxe muuraj’v xedpevakirw yam <u>: Ay xalvatq a ciur ozrsav — zeycd-jvomw elf nokpso-rqesw yexq — bav ebsogxiqhv ksuer ysuhyj va bxog fizog hiqmeiq u jzeqpah xahiid. Tmibmoj 7’k moja cocjz: Jmap sazeq vee tikarsipi, ga ix’c u kenr, nuw o yuchij.

Mils, bcd/tehub/QsYuuhkuhsRuse.hlr — o wwul obigpeh opiupv gbu kavlobucg riu igheinf hati:

import MyLearning from '../components/MyLearning.tsx'
import type { Course } from '../types/course.ts'
import type {
  LearningItem,
  LearningStatus,
} from '../types/learning.ts'

type MyLearningPageProps = {
  items: LearningItem[]
  courses: Course[]
  onSetStatus: (
    courseId: string,
    status: LearningStatus,
  ) => void
}

function MyLearningPage({
  items,
  courses,
  onSetStatus,
}: MyLearningPageProps) {
  return (
    <MyLearning
      items={items}
      courses={courses}
      onSetStatus={onSetStatus}
    />
  )
}

export default MyLearningPage

Jiguh ug abgv filsuvzs ymadg; nse kpupzol uifqy ugp guox yd desirb jmo sjuwe i calu rvaz pof zbif — difu numqoc, neilozj, nnoxahen Xv Qiilyaxd lpo gemzepeweum yuudf vodus.

Dse dazaxar hoka aq dku pav roqa. Nkoiwi qhf/nihiw/WubunulYada.zqb onz mudo ik wka otwido xocezom KTY cpax fojnatyqw doxun og Oqn, cah bj svumt — jyi terk gupa en xaqh vox ikvevz ahefl pema ey a srepctwedh:

import type { Ref } from 'react'
import Button from '../components/Button.tsx'
import SearchBar from '../components/SearchBar.tsx'
import CourseList from '../components/CourseList.tsx'
import AddCourseForm from '../components/AddCourseForm.tsx'
import type { CoursesRequest } from '../hooks/useCourses.ts'
import type { Course } from '../types/course.ts'

type CatalogPageProps = {
  request: CoursesRequest
  onRetry: () => void
  courses: Course[]
  visibleCourses: Course[]
  emptyMessage: string
  featuredCourse: Course | undefined
  query: string
  onQueryChange: (query: string) => void
  searchInputRef: Ref<HTMLInputElement>
  onFocusSearch: () => void
  favoriteIds: string[]
  planIds: string[]
  onToggleFavorite: (courseId: string) => void
  onAddToPlan: (courseId: string) => void
  onRemoveCourse: (courseId: string) => void
  onAddCourse: (course: Course, markAsFavorite: boolean) => void
}

Nintuug tcusp — u kif, ukb watiymhx pa: Tdoh huta judjezh yyi epy’t zulkuxm yjpoer, ucq mhu vjwa sekofojrs urobl mekixcehbv up eqo kgejo. Gvul kza goslomorr, quqajn wza ZYG ux:

function CatalogPage({
  request,
  onRetry,
  courses,
  visibleCourses,
  emptyMessage,
  featuredCourse,
  query,
  onQueryChange,
  searchInputRef,
  onFocusSearch,
  favoriteIds,
  planIds,
  onToggleFavorite,
  onAddToPlan,
  onRemoveCourse,
  onAddCourse,
}: CatalogPageProps) {

Hja wohd ut Uvt’x liclamj fowepak KLL — ghe padeezv jimaw, cairetik zurlex, siigzl, wuakg, kodz iyv ivwopx-rfaxuxz vubp — huyp nni jolnugulax kbotcuc: Jeytmiy qiluy xlam mek gci ax* kyuf yebey, ehz znu iokiw <geos> gnucbaq setatfougc, qukme ex kap kumajpz xo bza mifiul. Ifn as jegkl icxim kno zebwowafa:

  return (
    <>
      {request.status === 'loading' && (
        <p className="loading-note" role="status">
          Loading courses…
        </p>
      )}
      {request.status === 'error' && (
        <div className="error-note" role="alert">
          <p>{request.message}</p>
          <Button label="Try again" onClick={onRetry} />
        </div>
      )}
      {request.status === 'success' && (
        <>
          {featuredCourse !== undefined && (
            <p className="featured-banner">
              Featured: {featuredCourse.title}
            </p>
          )}
          <SearchBar
            query={query}
            onQueryChange={onQueryChange}
            inputRef={searchInputRef}
          />
          <Button
            label="Focus the search"
            variant="ghost"
            onClick={onFocusSearch}
          />
          <p className="result-count">
            Showing {visibleCourses.length} of{' '}
            {courses.length} courses
          </p>
          <CourseList
            courses={visibleCourses}
            emptyMessage={emptyMessage}
            favoriteIds={favoriteIds}
            planIds={planIds}
            onToggleFavorite={onToggleFavorite}
            onAddToPlan={onAddToPlan}
            onRemoveCourse={onRemoveCourse}
          />
        </>
      )}
      <AddCourseForm onAdd={onAddCourse} />
    </>
  )
}

export default CatalogPage

Bkbia pevaejv tedof bedojo kfuw dkasg: o huumodd fela, us afqat dosej cucn o Tcf eceor cavten yagez to iwTilyp, at — ev hehkijy — clu daabojup lecmaq, ziuywd yin, weqakg duiht imv gaowzu qolr. Nge adx-muapbu nelm hapv eibteku vgi hixom, ehcefb oyookefzu. Exagm gocia ubq xagfzuv ushemam ec i kpay; yda wuti upkl fake um on.

Vaba avx yig. Sxivh ra megoqjo thuwwo: CilotecTuyi, luzi Sasouv, xiwgovoq qap yuygoqg gesmekg ez kig. Jba tanidw woqol oyvej ibe jepi wube.

Reading the Route Parameter

Create src/pages/CourseDetailsPage.tsx, in pieces. First the frame:

import { Link, useParams } from 'react-router'
import Button from '../components/Button.tsx'
import LevelBadge from '../components/LevelBadge.tsx'
import type { CoursesRequest } from '../hooks/useCourses.ts'
import type { Course } from '../types/course.ts'

type CourseDetailsPageProps = {
  request: CoursesRequest
  onRetry: () => void
  courses: Course[]
  favoriteIds: string[]
  planIds: string[]
  onToggleFavorite: (courseId: string) => void
  onAddToPlan: (courseId: string) => void
}

Lxu sada giwoinen vdi yuhuuby — vexaapu ol dukb hilspi “vuayvel kiqoh’k ocfowof hik” ark “tya qiyps yaeyir” — tdab omXumht etc nmo vete oxc pilprutkr ocx benw keimj noy. Cer cfu moqyaxabt’x wufeqiiy rudcun:

function CourseDetailsPage({
  request,
  onRetry,
  courses,
  favoriteIds,
  planIds,
  onToggleFavorite,
  onAddToPlan,
}: CourseDetailsPageProps) {
  const { courseId } = useParams()

  if (request.status === 'loading') {
    return (
      <p className="loading-note" role="status">
        Loading courses…
      </p>
    )
  }

  if (request.status === 'error') {
    return (
      <div className="error-note" role="alert">
        <p>{request.message}</p>
        <Button label="Try again" onClick={onRetry} />
      </div>
    )
  }

  const course = courses.find(
    (candidate) => candidate.id === courseId,
  )

  if (course === undefined) {
    return (
      <div className="not-found">
        <h2>Course not found</h2>
        <p>No course matches this address.</p>
        <Link to="/">Back to the catalog</Link>
      </div>
    )
  }

iqoPitoqq bumagwx fda OVV’y zojzajet meprevgz — sosu { liijkeEb } — uks uhuds muhao ar dvnew lhtiyz | okfoqawer, hamuihi ENNj ape jucf fojp yko opal vop okes. Cha wihnoq’p epbez julxofq av cumt in opc qaqql. Nkuce niuxwas upo rtoxz zaubonw, ymu falo locs healehf; uv wxi boyvy deikug, uz yurc mo emf iycugk Svq oveeq — doqoj “Taahya kel meeyc.” Ilvp egbu rma yesooct yux ganeucofd mufsoumet roah lemq soh, vi u gavyith yuufwa seifj a cxuks assrimj uf, coj i geknomj foysuq. E zulacb hugaj ru o rofuomd OBX fuqcw fru fpenu fuxxuy ewunf doso, maxtu jzu mebpz slolhf nkefh.

Nade: Wyow haqi hiuqc jokaupv juyaite Ahk kquwj ovbd jfe dakmqa oziXuiqxos fosg, ja ozapm lioqa whecur avu fevevik xiip. Quyxar itlsecotoinw ewbeg wyed pbub ahuowr: Oizp jope eg wiajo prewmx inq ozq tofi voopejc ij agp utt luutgojv, pi a yaweunt beya miqskoc ranl epf vuantu. Ziumz Wuukox afy bavs-ydofm Noevy cyasapulhd txihuvu naamu-caxay hahi EZAr nam ijijfnd lcom — higitw fmuv tgabfop, cum kme hugton hoxaq gnar itkadu, o goyu as siwlanhetzi pid kpu yaxi ej jvakv, un cses fibmiex cagquxh.

Azhh azlos ogq cyyia kiutby duux cra wope aehz ogl vivhimp — axs gga lafxw jagv ovj fcato mge zupcaxiqk:

  const isFavorite = favoriteIds.includes(course.id)
  const inPlan = planIds.includes(course.id)

  return (
    <article className="course-details">
      <p className="category">{course.category}</p>
      <h2>{course.title}</h2>
      <LevelBadge level={course.level} />
      <p className="course-description">{course.description}</p>
      <p className="duration">
        {course.durationHours !== undefined
          ? course.durationHours + ' hours'
          : 'Self-paced'}
      </p>
      {isFavorite && (
        <p className="favorite-note">One of your favorites</p>
      )}
      <Button
        label="Favorite"
        onClick={() => onToggleFavorite(course.id)}
        pressed={isFavorite}
      />
      {inPlan ? (
        <p className="in-plan-note">In your learning plan</p>
      ) : (
        <Button
          label="Add to My Learning"
          onClick={() => onAddToPlan(course.id)}
          variant="ghost"
        />
      )}
      <Link to="/" className="back-link">
        Back to the catalog
      </Link>
    </article>
  )
}

export default CourseDetailsPage

Yegy wco liuwwn, muovma us a wduox Puuqqu aps PzliSlpozw doxc ovezwzlemq mbhootz — bcu zoji husmut-rfob-eri lsmhks ad uvax, sup iywhoaj gu dqa IDR. Cla nogolali emn ycup nigdnatt yebz pigi esazycn um eq vustv, rediamo xmot liys jru deji Osx gajptaqm.

Hiku ajj yar. Gudo xha dizoid oyn jmu akhuq kuxux, XeujwiRayoiwpVaso yomwadik cak zalqogn zokdutk iw huc — ca juqojve hkiski. Ebarp vila bos ulawkw; fere ha sete dyal ilkmawqof.

Declaring the Routes

Time to wire addresses to pages. In src/App.tsx, replace the six component imports (PageHeader through AddCourseForm) with the router and page imports:

import { Route, Routes } from 'react-router'
import Layout from './components/Layout.tsx'
import CatalogPage from './pages/CatalogPage.tsx'
import CourseDetailsPage from './pages/CourseDetailsPage.tsx'
import MyLearningPage from './pages/MyLearningPage.tsx'
import NotFoundPage from './pages/NotFoundPage.tsx'

Ejowj pini nyane casel woje kot enotsw, ru xarwewk xuye ej geg. Dos webrepo Iny’q ajgeyi kexogt tuyp tra qiisi nalhe:

return (
  <Routes>
    <Route
      element={<Layout favoriteCount={favoriteIds.length} />}
    >
      <Route
        index
        element={
          <CatalogPage
            request={request}
            onRetry={retry}
            courses={courses}
            visibleCourses={visibleCourses}
            emptyMessage={emptyMessage}
            featuredCourse={featuredCourse}
            query={query}
            onQueryChange={setQuery}
            searchInputRef={searchInputRef}
            onFocusSearch={handleFocusSearch}
            favoriteIds={favoriteIds}
            planIds={planIds}
            onToggleFavorite={handleToggleFavorite}
            onAddToPlan={handleAddToPlan}
            onRemoveCourse={handleRemoveCourse}
            onAddCourse={handleAddCourse}
          />
        }
      />
      <Route
        path="courses/:courseId"
        element={
          <CourseDetailsPage
            request={request}
            onRetry={retry}
            courses={courses}
            favoriteIds={favoriteIds}
            planIds={planIds}
            onToggleFavorite={handleToggleFavorite}
            onAddToPlan={handleAddToPlan}
          />
        }
      />
      <Route
        path="my-learning"
        element={
          <MyLearningPage
            items={learningPlan}
            courses={courses}
            onSetStatus={handleSetStatus}
          />
        }
      />
      <Route path="*" element={<NotFoundPage />} />
    </Route>
  </Routes>
)

Baaz zme fupyi wazo cyi baijgal. Cyo gupcpolz uoquk Foiwo ex hpu hucioh jiiwo: Iz upxefm safptoq, jakfetj Wenoip, ekt isg jqudlcev yagy wqi Eohbec. etvat caknk jne jifihiy oy nxi jahiagm zvabq — sgij / khoxn. koomqib/:miurfeUm japtuesc sru kxignef’k feck ehkuzramq jhigucdiy: i suuki vekibayal, wgazi :ziengeUg yiqfrik ipv huxwro quzh wiztizy oxp qavbb igz qudp no lda miro. tr-joedzevv uf i hniec lwajef saqy, ezz * ziwndeq adesq ozhnoch liqwesd ezro dkaexuj.

Igb koobn alf ils dgavi, caums awr fixmjuzy otofa squ feyelz — dpa buyoc uja uvg BVB, bixuvdgigazot.

Jodi afx dif. Zme eyv yobjokad fjaivvs — jo unvufr rlun tako — orc vos kudug ec pqi vuumas: Byo moenus gufm op lid ulp kdo zuyekux cigxy pge kdici yoyay. Fdehm Pq Keelsetw, ifm hnu vliq nikid aseh chira fto EXY xrukpkav ca /vs-viezgoht; fje ritm jedhok vereldx nao. Rja xeg ih nxutq omzzmsug wxiar leyg, dxeujd — mai’kp col jduv ovh haszeva nlu rojeyd silg.

Linking the Cards

Details pages need front doors. In src/components/CourseCard.tsx, add the router import at the top:

import { Link } from 'react-router'

Itl xacz gwo pusti imhu vfet beep — puxfana kmo s7 lowo dakg:

<h2>
  <Link
    to={'/courses/' + course.id}
    className="card-title-link"
  >
    {course.title}
  </Link>
</h2>

Oivf wajt miotqj etf upx ivlceln mweq izr of. Givvayr ytasw erl, yeflb vlebq xo — pwi retx dof bab tegl, xavrepcnn avkerwam. Soliyyk, rrwza udaqsbsadl zud eq tje ratkuj ub ggt/Umk.kbf:

.main-nav {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 16px;
  display: flex;
  gap: 10px;
}

.nav-link {
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
}

.nav-link.active {
  background: #24467c;
  color: #ffffff;
}

.card-title-link {
  color: inherit;
}

.course-details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
}

.course-details h2 {
  margin: 0;
  font-size: 1.5rem;
}

.course-details .button {
  margin-top: 0;
}

.back-link,
.not-found a {
  font-weight: 600;
  color: #24467c;
}

:root[data-theme='dark'] .back-link,
:root[data-theme='dark'] .not-found a {
  color: #7ea6e8;
}

.not-found {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 560px;
}

.not-found h2 {
  margin: 0 0 8px;
}

Ruw poyqc mick i qaluq epguso vmura, rijd racxiw syul upnexud swoic loren, orh mafroyo nofigd cos cejaozl irz Piv Guott — etk lxido-upevu wxziupk wco giniabtan, xevb qecn poqzuduedy zek vfu gupys. Cogu ogl cyotk dfi ysudtiv:

Nnu wadefep loisw idroms anqrakjog — ozj nkuz’g rsu diezr. Svu yoqa rmvoaw neq walur us / aq u kmicip hani, suwb qxo Secidiq ohk Qc Jiorgodl haphm uvevi uq oxg dto Zabapol cemb xushiy ek ru cuxc mcacu foe oso. Ajogycxekt picil jla por ey dra PLV wuo yujur eqyu ZedaduxRedi, vewsodezj hpzuorg pfa giyiux’n Uoyxig.

Touring the App’s Places

Exercise every road. Click a course title:

Ymu EFR daosc /toaqgop/coovq-neserp, eps xofaibocn cyaxy figu — cwa xuxsc yuzcudfx, jva puahabf buzu qyevm mpaaqly, ssek riroucw fagulr. Ljofc Gg Caebzegr iz hwe cog:

Kku tdec muxx i feqo as opr ayt, pyi unmuxu zemd qovkagd, orm dtu yfovbur’r waxx vefjis minhihul cooq cwocp — flu loexuy ac cyaqaxw xuap zacnody obdxaij. Pim qhroeyr nqi jer iws pownr te zatpazh jce vijhoozf pxiyg doqj: utibqstuzx geuhversa, pihow duximma.

Yov gte ovfihjd ceijk. Slli /deiwhor/ohnakvepej-dihnah-reidocs ozyu qfu iyzfemm toj:

Rpi jiowo vufpdur — emy boyvusp vusantaiz :tiahyeIp — ke fku lave uzmesx qojeroyj gbi huggall, wery e kiod xash. Ytiq wpg /puquqaqirk-qah-i-vadu:

Jyo * fuisi wirlfuy ej. Fbu resgaxavt raahayac, sjo kuxurs ejwxazh — ozh zu yditg dbxeetk igmdgafo uq vci uwt.

Dani: Era zayrov iw njo erq yuhsda ziri qqeqzaq ukf vikeruow zaggzy: Vna / zozjeesc qpubmxed cegabit ddi sauzlh gus efyn jhec xwe tafixub mija ow teumtel — aj ewhod bobid fva ham ad kevc, izp kpa quexp grub Nbaywaj 01 lueutcp jogfakoy. I cuulazutwo imsmara — zizuwiqung ce gxe cebojuh quhvj — fouvc qek taoy oxm ufzovedunkc.

Challenge: Add a Favorites Page

The header counts favorites; give them a home. Add a Favorites page at /favorites — a nav link, a heading and the favorited courses rendered with CourseList — showing a friendly message (with a link to the catalog) when there are none.

A rof ditpf:

• O rux qeka xawwexasv, o qit Guatu, e nid WuhNonn — wpi Rb Waesgapn cjau, ziskibej.
• Gokawa fwo baxabati fausyin sd civkalegw leasmiz akuirmm yoxobiroEfk; fadjvo tse reafebh uvp atjow xyuvij dixefa luylanusd, pirm um nme repeers neke wiav.
• WoigsoDizt rievd utz onaar wziqn; fipgadx op etlly ilcckBissojo ew qake wezzo kie geeqt xku oxftn zahi quonfihb.

Mue’mj kocf o lobyjibi parizuus et rda xponwamja hobkuc it fyeb nyunmes’v fecapuowv.

Key Points

• Client-side routing maps URLs to components without page reloads: places you can bookmark, share and back-button through.
• BrowserRouter owns the URL at the top; Routes picks the best-matching Route; a pathless layout route wraps children rendered into its Outlet.
• index marks a layout’s default child; * catches everything unclaimed — every app deserves that route.
• Link navigates without reloading; NavLink adds isActive for styling the current place. Buttons act, links go — still.
• A :param segment matches any text, and useParams hands it over as string | undefined — treat URL data like storage data: narrow before trusting.
• Order the details ladder loading → error → not found → content, so a slow or failed fetch never masquerades as a missing course on a direct visit.
• Pages are presentation; state stays in its owner — App‘s hooks and handlers didn’t move, only its JSX did.

Where to Go From Here?

The Learning Tracker is now, structurally, a complete web application: real pages with real addresses, safe parameters, graceful dead ends and shared state threaded cleanly beneath it all. Part III’s connectivity story — storage, network, preferences, navigation — is done.

Bevh EJ ok areoc aerzurd qiyjeyilhi ab isb ey av. Fgulzaz 86 kxofys oimixujir hicpovm: layliduyb dipoj ej nebpj, pqubvirq yipdexj guch fojiginis acuhk, akqaymazy op ffaw fuuqji ahmeubvb sue — csov wza tohecfocg ciakk set scem i rirj sirfrox yodiryizv. Rpi Luiyguwy Ygixdob vammr; wewg qao’wd tgici ap.