How to pass parameters with react-router

Question

Can you tell me How to pass parameters with react-router?

Answer 1

Passing Parameters with React Router

1. Define a Route with Parameters

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import ProductDetails from "./ProductDetails";

const App = () => {

  return (

    <Router>

      <Routes>

        <Route path="/product/:id" element={<ProductDetails />} />

      </Routes>

    </Router>

  );

};

export default App;

2. Pass Parameters Using <Link>

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

const ProductList = () => {

  return (

    <div>

      <Link to="/product/101">View Product 101</Link>

      <Link to="/product/202">View Product 202</Link>

    </div>

  );

};

export default ProductList;

3. Access Parameters in the Component Using useParams

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

const ProductDetails = () => {

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

  return <h1>Product ID: {id}</h1>;

};

export default ProductDetails;