Map URLs to pages, nested layouts and record details.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

A client router connects a URL to a component. BrowserRouter supplies routing context; Routes selects a matching Route. Link changes locations without a full browser document load. A nested route renders inside its parent’s Outlet. A parameter such as :id captures a value that useParams returns as a string.

For your basic, child and parameterized routing tasks, build a student list and a student details page. useNavigate supports navigation from an event, such as Cancel or completion of a successful form. These examples use React Router’s declarative mode in a Vite app; the Edupoly host itself uses Next.js routing.

The existing Examples tab currently contains form-library links. Those links remain available as supplied; the worked routing example here provides the route-specific starting point.

Data / props ↓ JavaScript expression ↓ JSX elements ↓ Visible UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

npm install react-router

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

import { BrowserRouter, Link, Outlet, Route, Routes, useNavigate, useParams } from 'react-router';
const students = [{id: '1', name: 'Asha'}, {id: '2', name: 'Ravi'}];
function Layout() { return <main><nav><Link to="/">Home</Link> | <Link to="/students">Students</Link></nav><Outlet /></main>; }
function Students() { return <ul>{students.map(s => <li key={s.id}><Link to={`/students/${s.id}`}>{s.name}</Link></li>)}</ul>; }
function Student() {
  const {id} = useParams(); const navigate = useNavigate();
  const student = students.find(s => s.id === id);
  return <section><h1>{student ? student.name : 'Student not found'}</h1><button onClick={() => navigate('/students')}>Back to students</button></section>;
}
export default function App() {
  return <BrowserRouter><Routes><Route element={<Layout />}>
    <Route index element={<h1>React routing practice</h1>} />
    <Route path="students" element={<Students />} />
    <Route path="students/:id" element={<Student />} />
    <Route path="*" element={<h1>Page not found</h1>} />
  </Route></Routes></BrowserRouter>;
}

Apply this to your assignments

Install react-router in the practice app. Complete basic navigation, a parent layout with Outlet, parameterized details and useNavigate. Test browser Back/Forward and direct loading of a detail URL. A deployed SPA needs its host to serve index.html for client routes.

Your existing examples

• Form Handling Controlled Components
• Form Handling with react-hook-form
• Form Handling with Formik, Field components from formik library
• Advanced Form Handling using useFormik hook
• Form Validation using YUP schema custom synchronous and asynchronous validation

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet and submission controls.

Common mistakes

Do not nest BrowserRouter instances. A client-only route guard is not server authorization.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements