Hackforge Academy

Explanation

React Router allows you to pass parameters in the URL (called route params). These params help load dynamic content like user profiles, course details, or product pages based on an ID or name in the path.

Code:

import { BrowserRouter, Routes, Route } 
from 'react-router-dom';
import User from './User';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" 
element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

Explanation

The ':id' part in the route path is a dynamic parameter. You can access this value inside the component using the useParams() hook.

Code:

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();

  return <h2>User ID: {id}</h2>;
}

export default User;

Explanation

Example URL: If the route is defined as /user/:id and the browser navigates to /user/101, then the id parameter will be 101 inside the component.

Code:

// URL example
http://localhost:3000/user/101

// Output
User ID: 101

Explanation

You can also pass multiple parameters in a single route by defining more dynamic segments.

Code:

<Route path="/course/:courseId/
lesson/:lessonId" element={<Lesson />} 
/>

// Accessing params
const { courseId, lessonId } = useParams();