Client-side routing in single-page apps

Model answer. In an SPA, the browser loads one HTML page and a JavaScript bundle once. After that, "navigating" swaps components in place instead of requesting a new HTML page.

Client-side routing keeps the URL in sync with what is shown:

• Links call the History API (history.pushState) to change the URL without a reload.
• The router listens for URL changes (including the back button's popstate event) and renders the component that matches the path.

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/colleges/:slug" element={<College />} />   {/* useParams().slug */}
    <Route path="*" element={<NotFound />} />
  </Routes>
</BrowserRouter>
// navigate with <Link to="/colleges/iit-madras"> or useNavigate()

Things an SPA must handle:

• Server fallback: a direct visit or refresh on /colleges/x must still be served index.html, otherwise the server returns 404.
• SEO and first load: content rendered only by JavaScript is slower to appear and harder to index; frameworks like Next.js add server rendering.
• Accessibility: move focus and announce the new page title after navigation, because there is no full reload to do it.
• Scroll restoration and code splitting, so the whole app is not downloaded at once.