How do you handle route parameters in React Router and how can they be accessed within a component

Question

Can i know How do you handle route parameters in React Router, and how can they be accessed within a component?

Answer 1

To handle route parameters in React Router v6+, use : in the route path and access them using the useParams() hook.

Define Route with Parameters

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

Access Parameters in Component

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

function User() {

  const { id } = useParams(); // Gets 'id' from URL

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

}