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

Question

Параметры маршрута можно получить с помощью хука useParams, который возвращает объект с ключами, соответствующими динамическим сегментам. Параметры запроса можно извлечь через useSearchParams, предоставляющий доступ к строке запроса.

YeaHub · Accepted Answer

React Router предоставляет удобные хуки для работы с параметрами маршрутов:Для динамических сегментов маршрута: Используется хук useParams:import { useParams } from 'react-router-dom'; const User = () => { const { userId } = useParams(); // Получаем значение сегмента userId return

User ID: {userId}

; };Если маршрут /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

Sort by: {sort}

; };Для URL /products?sort=price, sort будет price.Эти хуки позволяют эффективно извлекать параметры и использовать их для рендеринга компонентов или выполнения логики.