How to Use useParams in React for URL Parameters

In React, you use the useParams hook from react-router-dom to access dynamic parameters in the URL inside functional components. It returns an object with key-value pairs matching the route parameters defined in your route path.

Syntax

The useParams hook is imported from react-router-dom and used inside a functional component. It returns an object containing all URL parameters defined in the route.

• const params = useParams(); - gets all parameters as an object.
• Access parameters by their name, e.g., params.id.

javascript

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

function MyComponent() {
  const params = useParams();
  // params is an object with keys matching route params
  return <div>Parameter id is: {params.id}</div>;
}

Example

This example shows a simple React app with routing. The route /user/:id defines a dynamic parameter id. The User component uses useParams to read and display this id.

javascript

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link, useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <Link to="/user/42">Go to User 42</Link>
    </div>
  );
}

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

Output

When you click 'Go to User 42', the page shows: User ID: 42

Common Pitfalls

• Using useParams outside a Router context causes errors because it needs routing context.
• Forgetting to define the route parameter with a colon (e.g., :id) means useParams will return an empty object.
• Accessing a parameter that does not exist returns undefined, so always check before use.

javascript

/* Wrong: useParams outside Router */
import { useParams } from 'react-router-dom';
function Wrong() {
  const params = useParams(); // Error: no routing context
  return <div>{params.id}</div>;
}

/* Right: useParams inside Router with route param */
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';
function Right() {
  const { id } = useParams();
  return <div>{id}</div>;
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/item/:id" element={<Right />} />
      </Routes>
    </Router>
  );
}

Quick Reference

• Import: import { useParams } from 'react-router-dom';
• Use inside: Functional components within a Router.
• Returns: Object with keys matching route parameters.
• Example route: /product/:productId
• Access param: const { productId } = useParams();

Key Takeaways

Use useParams inside functional components wrapped by a Router to access URL parameters.

Define route parameters with a colon prefix like :id in your route path to make them accessible.

useParams returns an object with keys matching your route parameters for easy access.

Always check if the parameter exists before using it to avoid undefined errors.

Do not use useParams outside routing context or it will cause errors.