Project 13: Job Board Listing

React Engineer

Builds on these lessons

Step 1 of 3

Project

Setting Up Routes

Wrap the app in <Routes> with two <Route> children — one for "/" rendering JobList, one for "/jobs/:id" rendering JobDetail. React Router matches the current URL against these path patterns and renders whichever element fits.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { Routes, Route } from "react-router-dom";

function JobList() {
  return <h1>Open Roles</h1>;
}

function JobDetail() {
  return <h1>Job Detail</h1>;
}

export default function JobBoard() {
  return (
    <Routes>
      <Route path="/" element={<JobList />} />
      <Route path="/jobs/:id" element={<JobDetail />} />
    </Routes>
  );
}

← Previous Next →