Как получить параметры маршрута внутри компонента?

React Router предоставляет удобные хуки для работы с параметрами маршрутов:

Для динамических сегментов маршрута: Используется хук useParams:

import { useParams } from 'react-router-dom';
const User = () => {
	const { userId } = useParams(); // Получаем значение сегмента userId
	return <div>User ID: {userId}</div>;
};

Если маршрут /user/:userId и URL /user/123, то userId будет 123.

Для параметров запроса (Query parameters): Используется хук useSearchParams:

import { useSearchParams } from 'react-router-dom';
const Products = () => {
	const [searchParams] = useSearchParams();
	const sort = searchParams.get('sort'); // Получаем значение параметра sort
	return <div>Sort by: {sort}</div>;
};

Для URL /products?sort=price, sort будет price.

Эти хуки позволяют эффективно извлекать параметры и использовать их для рендеринга компонентов или выполнения логики.