project-task.md

✅ React Router Dynamic Task Viewer Activity

🎯 Objective

Students will create a React application that:

• Displays a list of tasks on the main page.
• Allows users to navigate to a specific task's detail page using URL parameters.
• Handles edge cases like invalid or missing task IDs.

This activity reinforces the use of React Router's dynamic routes and the useParams hook.

---

🧭 Steps to Complete the Activity

1️⃣ Set Up the Application

Install React Router

Run the following command to install React Router:

npm install react-router-dom

📁 Create the File Structure

• App.js: Main component to set up routes.
• TaskList.js: Component displaying a list of tasks.
• TaskDetail.js: Component displaying details of a specific task.

---

2️⃣ Define Task Data

Create a mock task dataset in a separate file or directly inside the TaskList component:

const tasks = [
  { id: 1, title: "Learn React", description: "Understand the basics of React." },
  { id: 2, title: "Practice Hooks", description: "Master useState and useEffect." },
  { id: 3, title: "Explore React Router", description: "Learn routing and URL parameters." },
];

3️⃣ Create the TaskList Component

• Display a list of task titles.
• Each title should link to a detail page (e.g., /tasks/1).

---

4️⃣ Create the TaskDetail Component

• Use the useParams hook to retrieve the task ID from the URL.
• Display the corresponding task's title and description.
• If the task ID is invalid, show an error message.

---

5️⃣ Configure Routes in App.js

Set up routes using react-router-dom:

• / → TaskList
• /tasks/:id → TaskDetail

---

6️⃣ Add Styling (Optional)

Improve UX by adding basic styles:

• Use different layouts or colors to distinguish between:
  • The task list view
  • The task detail view

---

🔄 Extensions

🔙 Add a "Back to Tasks" Button

• In TaskDetail, include a button to navigate back to the task list.

❌ Handle Invalid URLs

• In App.js, add a fallback <Route> that renders a "Page not found" message for unmatched routes.

---

✅ Expected Solution

Students should build a fully functional task viewer where:

• The task list displays clickable links.
• Each link navigates to a detail page for the selected task.
• Invalid or missing task IDs are handled gracefully with a clear error message.