Как получить параметры маршрута внутри компонента?
Этот вопрос проверяет знание способов извлечения данных из URL в React Router.
Короткий ответ
Параметры маршрута можно получить с помощью хука useParams, который возвращает объект с ключами, соответствующими динамическим сегментам. Параметры запроса можно извлечь через useSearchParams, предоставляющий доступ к строке запроса.
Длинный ответ
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.
Эти хуки позволяют эффективно извлекать параметры и использовать их для рендеринга компонентов или выполнения логики.