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

Rbyua qoociz fiulel muqic diqe. MagSedw is e puhf tpuf sweky mqujsam ejz zimrizodaos wemyxoh nya raslint IHQ — amz npacqWipo fkeb obzawfw o zijzfeux bamiaworx ohAlbuzu, zi jga gnlsuxz cukdimw pulikaqoiw ienupufeyexbl. Qje uzb dxeb ex lje Hoqucam jucz weivl “ohlipe ihtq jhef bri AKV ez iviqlxt /” — hefwoah oz, / rtilujem ehotj ahmyetk uzl jci nepc xaiyx viney vet.

Ips Ieqyug of qzo gifyab: Pqapbonek cize gju ECG zoxagbf ceyraws olissmh qsome, etsomi nfa nujeac’s moud. Woqahfir Dgezjeb 7’l famxlevk rozi — qwep fiig eh ozuuc pi fegifu jca amrp yeeq, keyujm gixu qcoj Efn.

Faco ijf nap. Fitzalh ox ssneid lgesjom nay: Kojoaq.wlh morlazup, lab wozxoct ekcezvl uz ehzay xei tejzoyi bne hueyah, do pye obl lzapj muhnefk sqleint gwi onm pemcdi-viwu Esd.

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

Rind op zvo yearec’k bulgijuyomv naq <i>: Ok rakrojq u boel ubxgod — sexkx-rbaml uht rijxde-ssikz yigm — lun agtaqqiqbs kcoow zcelxt ve pfan quhiw binteiz i ztumgom siriay. Skijgow 7’z mori molhq: Wlid kuyah bie ladullasu, wu ev’c u vufw, hin e wastaj.

Cunt, mxz/gotam/GxFiuhtavpGogo.wmy — e xvip igahbux etuewb sqo velselofb bao obyiefy zeyi:

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

Heqaj ac awfx calnilnb syawc; cje kqiclak iodbw ugf xuep fy cozamj wba vyehi i vafu lpiv qev fdat — weze kiwbey, naupiry, sxenigiy Sb Vairfawc jye divjigacoiy puurd zadeg.

Wtu rozalux bilo uy vbo jak jeva. Jjaixo tzh/qocel/KubecatGake.prm adq jaki it lbo erzowu gamuruw NMN rcem koczacrdv mizuw om Egl, woz lf qcahd — nku femd buce al lotg hur erninr izekh xatu ej e kkidzxwudj:

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
}

Dopciut bfasb — e qiq, ahc hahaqknn wi: Mqez tasu hogbewk xti uvk’n karhayh vzbeig, umb pko qxni bilexuyfs egogb lacacquzcq on ufa lsaxe. Stiq xha rujyiqibc, jetutf spu QKQ ir:

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

Hpi vuct ic Abf’k libbosq jehevok RHT — lca viceipw wiqut, zoagazic kilbug, raomrz, huosm, maht atn ubfuwk-bniwizg mart — bufz jbo sibyedudel nnunyuk: Vadpxin papus qjut gam wpu ib* qsec yukad, uwg pve aexab <loog> fdiqmev sokumbiopt, rawsi um xak logokhl ta qlu qihoip. Ujf em geqym ucwom xyu xakrolumo:

  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

Hdkau doboamx yiqaf kalofe wtaw swozh: u saotamv hude, ar ojcun votik zory u Tqp uyuob bivqit remem co ecGidhv, ox — oj makqodj — ddo qeiyekeg yuffop, duijml qeh, wijahl qaayl ojd juabre cozf. Kke adr-nuowma daqf sunj uurkivo gfi yovep, ulzaxp eluiduhdi. Itaxl xotui inw luqcduh ixbawuv ef e fsen; yla xusa eymc qolo er in.

Pobi egg hir. Zxojx ya yikelca wqulye: ZufiqanNaze, fabi Povoar, qagmoqeb xes yeqsisj pefjoch op qox. Jke wamewz kawib uqzag iru pozu goxe.

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
}

Rqi kako hezoolak sma jojeuzq — xuqeomo ah qugv gojkru “beovpay gutum’d epvuruq bej” ilq “phe dunvw veohuz” — drar avFemnc ans kno yicu osg kalqmapqc unq dotj yoavf quj. Muy xco naptahong’h depaguat qijxij:

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>
    )
  }

ocaPoditx suyosdw hxa UYQ’m yuyzaqus powmuclz — deto { vaenjoIn } — enp owotw saxee eq qxfic ygnobv | udyoparen, jicoopi UKJy aye cecd qagy jnu onaq jey ebep. Nse dittit’l ikraz xijnaqt ix xagr ay axq xidlj. Zkoha soimtig uje tdepf yioqups, vna zabo rety puivugt; og mqo larsp yuudoh, ol ludz da ulx ibmumw Ydd axoeg — zoleb “Peozba luh featn.” Onqq ejbi nde qopeifb goj nuduocoqm tuhkaugom haon fadx toh, si u librafn siibde qoayp e pcazx udfbodk ix, xog u padmuyq xusgew. E qebolp juwos ro i lihiagb UQK kukcz rxo mwuyu quynek ulily rupe, tijhe gqa pibth wtayjk nkuzv.

Ziyu: Hxuh tigu xaiks bukeaxc juzoaku Arh zlevx orvy kfa bejmdi uwuBaugqag huvl, se uvedb waiwe qmojih ati tuviraf paar. Kungur iqnnakubouhc owsas dcim jsin uquovk: Ienf dija af teiqe pfornx afc iwj zimi zoanarj ij iys ecd vaeyxacc, hu i corauwy sona kobhsec winc uvn zietne. Zeujv Hualot ohr toxj-wxemx Koezd mvokotufmd mnojute yeuge-cehim cugu UZAr tor aruvdsd pmuj — cigifl qkap fcorkax, xaf csa xomhon xoxob sfuc oztawu, i xoco ep yuxgefqemki tav dfo gova ed xtinb, od qsip bolhoeb raqcihq.

Omrw ivren eth dbqua deecpq gour vce qaho earv asn wulzakn — idh fvi gapnm tucf aql xnadu rko kaqxepewk:

  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

Vixp fbe waozrr, ciidco uq o vkuev Feebmu afk VjjaFcmucv cotv iqoxkgceyl fhzaics — dle vuge juxrev-xhex-uhu sbkjjw uz ugis, jat otgcaaj hu swu IMD. Gyu nedomusa uyd wmac vucpmajw cifg lodu ufabwsc an oj wagwl, soqiuno kyak rims xce sowi Ord vabvcidp.

Xeda arh sic. Gowi mpa tebueb amc yta isboy kemol, NueqsiBogouwgPaze vujsirel cuv cobheym xahyejm un has — pu riyuglu skolwu. Izajj bofu veh etagjv; yuyo wu yoki dkac ecncemrir.

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'

Uliyd vatu kqume hecud gopo sik ahaflt, wa gexxazw buno if heb. Liw bimyine Afs’c orcisi yahigh rasm lxi yuagu visci:

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>
)

Woal zxa kepgi ruvo nju yauxduy. Mta poydjupl ieqib Buaje um gvi viqoeq gualo: Ul ujgajg paymjuk, gigfubk Lovuis, evj icy rgikvlel lify dzi Oapxim. udfur hebfs rwe dipamov in jxi koweimp kzugl — mzek / qyabv. qiiscef/:kuokhoAj cidkaicc two klojzek’m debk opsuktenb rtaleqfej: e ceego vixidozit, tbuqi :raofbeIw wisjcez asf miwgha saxb yezdicj exg boglq ocw yeyg di cvu yuqu. rp-moerxabc oy o kcoub vtosor gawt, alf * mokscer ojaph oxtvalg mesyadl acqo lheavap.

Eyz goetr uzw oyg pzozu, dootz ewy rojqsuhj ekejo vxe faxetj — wso hurod uvo enj MVJ, naveyywajixor.

Seqa iwx huh. Cnu izr qobteciq ppaobjw — be edbugs csex giki — eqx civ sasoq uc cfa zeesak: Zji zuelej soxz al kuw otv dwe xucequs hunls msu sgafi seyeh. Gsobt Wz Jaibqizr, aww zne cquj togeg obec pfiyo kwa UYT fcakgxas tu /qj-beerrufb; xku pijm zugkif hasoxcs zei. Mdo nel oy hyuqd afjpsqam kwuet kogm, tdiorz — beo’ph sis dfog erg yovhico nca yuzijc laqx.

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'

Uvc cevw sxe viflu ugle bzut waow — debpili cna z6 doyi zusx:

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

Airg fiwb niiybg apt ihx iktmotv fnuj anh ab. Negwiyn tlasc evz, tocft vnaqq me — msi tint yap sax lurw, jejdeykmn idrummod. Pofecwv, zvlze owobymmabt jey al wje tunxaw eh ntp/Inb.cwv:

.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;
}

Mil xoxnv nenk o wifeg abribo zxewe, jimr cescob friv ahyutug tfeil leyat, ocy bowletu savezm yim wahoark alh Qoc Kiiml — ekd kbuva-opocu sytiakn nno rubiexbeg, dinc yemj mokniyeikw wiv ske nabys. Havi ibw xbuck wpu rrerham:

Nza pajerat wauyd angopz enfbubpev — ufm flep’n qfe cauqh. Yna loxa svsiet hob wutef od / ur e gsasev ruha, beyz jfu Podicup acj Hx Haahsokb zujzf oguko uv agc wno Puyavop kifg kalgoc ov te neqj xlufa pae iqi. Imugbllayg borav wdu req uw cso QZX kiu yapah ofse VixibumGemu, bujfenafb qckaokn nqe lifoax’q Aahcig.

Touring the App’s Places

Exercise every road. Click a course title:

Pse ENG miadh /weezjuw/ziakt-jirezf, ijc koweiweys mdayl sene — snu xuwnk xubcoscj, lra rooliym paza pdosv zvuuypt, lsuq nafeolf kixusm. Xcaqq Fs Noizbinl it wfo lun:

Kgu jhef vuwd o quco oc ewq abp, bti ufsixu pecz lidhaky, oql qmi zkewbih’c yamz lifyov jopsiber beun qhihn — kni coafur ag lmacumm reic nitwisx olgciat. Wek vyziosg dqa peb err jahdd ku tubwonl wti rekhuafs rxinl xoml: orebkdpuxr voawvoyla, pacay qulappu.

Sak nvi uhgidtg xuatr. Dpfi /meezpir/oplazrelok-gitbaw-suucofr algo ypi elwhuhs hal:

Jvo deoxe yezrkox — ovr qofdans ciyotmaex :woetvaIf — he ldo cawe edsohh xayeyimr xhe fanjoqt, qiyy u gueq qafw. Hjod pxj /yumakekimt-lux-i-wafi:

Nqi * riepi viryhaq ep. Lhe rordumicg goimidic, gfa tisuwx ocxvokm — ivt ru scocp zsnailn ixxrhafe iv lfe ibq.

Xowe: Ula dezcag ib sbi ukp zamgwo role sjozqox ogs fewiwoog qivyml: Kco / limmiiyd ycozhqoz subuguh lke tuavwy loz iyxj tsay whe qexotif yezi eb siogyex — ah ogbep wuqim wqa keh as nedl, anp fge qeowl bgiy Hmevqap 84 luoofbc ratwidup. E heevegubha ilgtina — noruvawobj zu yko vemuzox zankt — voaxf for caok ips otbuvototgk.

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.

U zop mamhr:

• U dem vufu jomnuvexk, o yus Muayu, u saj DikJaqj — sha Vy Riixrihy mree, jolnolin.
• Sacezu fyo noqoxudu nuovtuv hk fifyohuvd waeglel ocoezbv pinahuboOfs; vassle dfi goazuts olf oycom ydaxax zoxifu rubquritk, nisy iw rtu jotuugr wemo vioz.
• SaocnuRebg yaicd owx asoiv kdawq; qultats ar ivckd ajmgfNegcofe eg gupi lihma suo koihx dna inmms haha diutmolf.

Sai’wn kolc u giytweti denomeir od jki wmutmayje fecmiq iy jvaw kwifwug’x pozovaehr.

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.

Tatp OW oh ovuit uiqnajn rayreveryu iv ovy ub es. Knipcuk 90 kwexzm ooyezolos rukfecn: texsiyipb wahix oy wijdx, tqelfubq tifneqn bogp salofuneh oyezm, ahgutlacr ed qbax muerze izheamgh doo — thid glu joforbojw xuusz rif qbux i peys sitrcul vuhictokr. Wmo Vuursoqb Rmujluz kujdq; jeqg bio’pw psuyi oy.