React Router – Dynamic Route Parameters

Step 1: What Are Route Parameters?

They are dynamic parts of the URL that you can extract and use in your component.

Example:

/user/101

Here, 101 is dynamic — maybe a user ID.

You can define this route in React Router like:

<Route path="/user/:id" element={<User />} />

🛠 Step 2: Create a User.jsx Component

import React from "react";
import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams(); // 👈 extract :id from URL

  return (
    <div>
      <h2>User Page</h2>
      <p>User ID: {id}</p>
    </div>
  );
}

export default User;

📁 Step 3: Add the Route to App.jsx

Update your <Routes> in App.jsx:

Check post for creating routes: What is React Router? – BlogsHub

       <Routes>
          <Route path="/" element={<Home />}>Home</Route>
          <Route path="/About" element={<About />}>About</Route>
          <Route path="/Contact" element={<Contact />}>Contact</Route>
          <Route path="/User/:id" element={<User />}>User</Route>
        </Routes>

🧪 Step 4: Test It

Try visiting: http://localhost:5173/user/101

Keep Learning 🙂