Dynamic Routes and URL Parameters

import { Link } from "react-router-dom";

function Courses() {
  const courses = [
    { id: 1, title: "React Fundamentals" },
    { id: 2, title: "Node.js Basics" },
    { id: 3, title: "MongoDB Essentials" }
  ];

  return (
    <div>
      <h1>All Courses</h1>
      <ul>
        {courses.map(course => (
          <li key={course.id}>
            <Link to={`/courses/${course.id}`}>{course.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Courses;
src/pages/CourseDetails.jsx
jsx
import { useParams, Link } from "react-router-dom";

function CourseDetails() {
  const { courseId } = useParams();

  const courses = {
    1: { title: "React Fundamentals", lessons: 12, level: "Beginner" },
    2: { title: "Node.js Basics", lessons: 18, level: "Intermediate" },
    3: { title: "MongoDB Essentials", lessons: 9, level: "Beginner" }
  };

  const course = courses[courseId];

  if (!course) {
    return (
      <div>
        <p>Course not found.</p>
        <Link to="/courses">Back to all courses</Link>
      </div>
    );
  }

  return (
    <div>
      <h1>{course.title}</h1>
      <p>{course.lessons} lessons · {course.level}</p>
      <Link to="/courses">Back to all courses</Link>
    </div>
  );
}

export default CourseDetails;