Client-Side Routing

A school app has a student list and an attendance screen. Teachers should move between them with links, share useful addresses, and use the browser’s Back button instead of remembering which panel they previously selected.

Routing connects a location to the interface displayed for that location. Client-side routing changes the rendered screen through browser JavaScript; it does not by itself create a server endpoint or store school records.

Match a route
Connect paths to components.
Navigate clearly
Use links and a useful unknown-page fallback.
Choose a host policy
Distinguish an isolated demonstration from public browser URLs.

Follow information through the application

Location
The router receives /students.
Match
Routes selects the student component.
Screen
The directory appears beneath shared navigation.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

A location selects a component

A path is the part of a URL such as /attendance. A route describes which component belongs at that path. The navigation stays outside Routes, so it remains visible while the selected screen changes. This avoids duplicating the school navigation in every page component.

React does not include a general URL router. This example uses React Router’s declarative APIs. Link describes navigation and preserves link semantics. Routes finds a matching Route, whose element supplies the React content. The path="*" route gives unmatched locations a useful explanation instead of a blank panel. React Router documents route matching and nested routes.

Navigate between two complete screens

This is a complete App.jsx for a React project with React Router installed. MemoryRouter keeps its navigation history in memory, beginning at /students. It makes this example independent of the page hosting the lesson. Select Attendance to change the heading while retaining both navigation links.

No attendance is recorded. These components only demonstrate how locations select content. In particular, the address bar does not change with MemoryRouter; do not infer public URL behavior from this isolated example.

React · JavaScript with JSX

import React from 'react';
import { MemoryRouter, Routes, Route, Link } from 'react-router';
function Directory() { return <h2>Student directory</h2>; }
function Attendance() { return <h2>Attendance register</h2>; }
export default function App() {
  return <MemoryRouter initialEntries={['/students']}>
    <nav aria-label="School pages">
      <Link to="/students">Students</Link>{' '}
      <Link to="/attendance">Attendance</Link>
    </nav>
    <Routes>
      <Route path="/students" element={<Directory />} />
      <Route path="/attendance" element={<Attendance />} />
      <Route path="*" element={<h2>Page not found</h2>} />
    </Routes>
  </MemoryRouter>;
}

Expected screen and behavior

Initially: Students and Attendance links, then Student directory.
Selecting Attendance displays Attendance register.

Navigation changes the match, not the data

React · the route definitions

import React from 'react';
import { MemoryRouter, Routes, Route, Link } from 'react-router';
function Directory() { return <h2>Student directory</h2>; }
function Attendance() { return <h2>Attendance register</h2>; }
export default function App() {
  return <MemoryRouter initialEntries={['/students']}>
    <nav aria-label="School pages">
      <Link to="/students">Students</Link>{' '}
      <Link to="/attendance">Attendance</Link>
    </nav>
    <Routes>
      <Route path="/students" element={<Directory />} />
      <Route path="/attendance" element={<Attendance />} />
      <Route path="*" element={<h2>Page not found</h2>} />
    </Routes>
  </MemoryRouter>;
}

When Link is activated, the router changes its current location. Routes reads that location and renders the matching element. The previous page can unmount, so temporary state inside it may disappear. Keep shared data at an appropriate owner when it must survive navigation; choosing a route does not provide persistence.

A link is appropriate because the action means “go to another place.” A button is appropriate for saving or opening a local editor. Native semantics give keyboard and assistive-technology users useful expectations, so avoid replacing navigation links with clickable text.

Use public browser addresses deliberately

In a browser application, BrowserRouter uses the browser’s location and history. The following App.jsx is an alternative complete root for the same installed router. Refreshing /attendance then sends that URL to the host before React starts. Configure the host to return the app entry document for appropriate application paths; a client wildcard route cannot fix a server that returns a 404 first.

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router';
function Directory() { return <h2>Student directory</h2>; }
function Attendance() { return <h2>Attendance register</h2>; }
export default function App() {
  return <BrowserRouter>
    <nav aria-label="School pages">
      <Link to="/students">Students</Link>{' '}
      <Link to="/attendance">Attendance</Link>
    </nav>
    <Routes>
      <Route path="/students" element={<Directory />} />
      <Route path="/attendance" element={<Attendance />} />
      <Route path="*" element={<h2>Page not found</h2>} />
    </Routes>
  </MemoryRouter>;
}

Deployments under a subdirectory also need matching router and asset-base configuration. Decide this together with the build and deployment policy. Client navigation working after the homepage loads is only one of the necessary checks.

Worked practice: add a timetable route

Add a Timetable link and /timetable route. Preserve existing screens and the unknown-location fallback. The worked answer below includes the entire application so the new route does not depend on unseen components.

The extra link and route agree on the same path. Start at /students and select Timetable: the shared links remain, and the new heading appears. Adding only a navigation link would lead to the fallback because no corresponding Route would exist.

React · JavaScript with JSX

import React from 'react';
import { MemoryRouter, Routes, Route, Link } from 'react-router';
function Directory() { return <h2>Student directory</h2>; }
function Attendance() { return <h2>Attendance register</h2>; }
export default function App() {
  return <MemoryRouter initialEntries={['/students']}>
    <nav aria-label="School pages">
      <Link to="/students">Students</Link>{' '}
      <Link to="/attendance">Attendance</Link>{' '}
      <Link to="/timetable">Timetable</Link>
    </nav>
    <Routes>
      <Route path="/students" element={<Directory />} />
      <Route path="/attendance" element={<Attendance />} />
      <Route path="/timetable" element={<h2>School timetable</h2>} />
      <Route path="*" element={<h2>Page not found</h2>} />
    </Routes>
  </MemoryRouter>;
}

Expected screen and behavior

Initially: the student directory and three navigation links.
Timetable displays School timetable.

Route visibility is not permission

Hiding a link or redirecting away from a screen is useful interface behavior, but it does not authorize access to student records. A real server must check the current user before returning private data. Likewise, reloading a page loses in-memory records unless a separate storage strategy preserves them.

Test direct loads, unknown addresses, navigation and Back behavior in the actual router and host. Use meaningful page headings and consider focus and title updates when screens change. Routing decides where users go; accessibility still determines whether they can understand the change.

Connect locations, screens and hosting

A router matches a location to a component, while links express navigation. MemoryRouter isolates the example; BrowserRouter connects navigation to browser addresses and requires an appropriate host policy. Keep route matching, data ownership and authorization distinct.

Continue with student IDs and URL search parameters to make addresses carry useful screen information. Review accessible navigation when checking the resulting experience.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: URL Parameters and Search →

Client-Side Routing