URL parameters

Learn to read :id style parameters with useParams.

URL parameters

In React Router you can mark part of a path as a parameter. The :id in /users/:id is a parameter; you read it with the useParams hook.

The name is free: :slug, :tab or :category. Multiple parameters are allowed too: /blog/:year/:slug.

The parameter always arrives as a string; if you need a number, convert with Number(id). At the end of this lesson you will write a product detail page.

Multiple parameters

Defining multiple parameters is easy: /blog/:year/:slug. In the component you destructure both from the same object: const { year, slug } = useParams();.

Parameters are not optional; if missing, the route does not match. For an optional segment use ?: /files/:name?. Then name may be undefined.

Order matters: /blog/:year/:slug and /blog/:slug/:year match differently.

Exercise User detail

Complete the skeleton below. Write a UserDetail component; read id with useParams and return <p>User {id}</p>. Export it.

Show example solution

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

function UserDetail() {
  const { id } = useParams();
  return <p>User {id}</p>;
}

export default UserDetail;

Test yourself

What does useParams return?
- Bir dizi
- Bir nesne
- Bir dize
- A number
Show answer

Bir nesne — useParams returns an object; keys are parameter names.

Reading parameter

const { id } = ____;

Show answer

const { id } = useParams();

URL parameters: match the terms

useParams

Reads a parameter
:id

Parameter marker
Number(id)

Converts to a number
:name?

Optional segment

Next lesson: Nested routes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies