Ответ
React Router предоставляет несколько хуков для работы с маршрутизацией:
useParams- получает параметры из URL
const { id } = useParams();useNavigate- программная навигация
const navigate = useNavigate();
navigate('/about');useLocation- доступ к текущему location объекту
const location = useLocation();useSearchParams- работа с query параметрами
const [searchParams, setSearchParams] = useSearchParams();useRoutes- декларативное определение маршрутов
const routes = useRoutes([
{ path: '/', element: <Home /> }
]);useMatch- проверка совпадения с текущим URL
const match = useMatch('/users/:id');Эти хуки позволяют гибко управлять навигацией и получать данные из URL без необходимости использовать компоненты-обертки.
Ответ 18+ 🔞
О, слушай, смотри, React Router, этот хитрожопый инструмент, он тебе не просто так хуки подсовывает. Не надо тут оборачивать всё в эти ебучние компоненты-обёртки, как в старые добрые времена. Всё проще, блядь.
Вот, например, useParams. Хочешь вытащить айдишник из урла типа /users/123? Да похуй! Берёшь и вытаскиваешь.
const { id } = useParams();И всё, пиздец. У тебя в руках id, который равен "123". Никаких props.match.params, ёпта. Красота.
Дальше, useNavigate. Ну это вообще песня. Раньше надо было history.push('/about') орать, а сейчас? Сейчас ты как царь, блядь.
const navigate = useNavigate();
navigate('/about');Хочешь — перешёл, захочешь — назад отправил navigate(-1). Власть, сука, абсолютная.
useLocation — это тебе не хухры-мухры. Хочешь знать, на какой ты сейчас странице, что за хуйня в query string висит? Бери объект location и копайся.
const location = useLocation();Там тебе и pathname, и search, всё как есть. Прозрачнее некуда.
А вот useSearchParams — это вообще магия, блядь. Раньше чтобы с query параметрами работать, надо было парсить эту строку, мозги выносило. А сейчас?
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get('page');
setSearchParams({ page: '2' });Взял, достал, установил. Всё, ебать, как по маслу. Удобство — овердохуища.
useRoutes — это для тех, кто любит декларативщину, но без этой ёбаной кучи <Route> компонентов в основном файле. Собрал массив маршрутов в кучку и отдал хуку.
const routes = useRoutes([
{ path: '/', element: <Home /> }
]);Чисто, аккуратно, в рот меня чих-пых.
Ну и useMatch. Иногда же надо проверить, а совпадает ли текущий URL с каким-то шаблоном, не для рендера, а просто для логики. Вот тебе и проверочка.
const match = useMatch('/users/:id');Если совпало — получишь объект, нет — null. Проще пареной репы.
Короче, все эти хуки — они чтобы жизнь мёдом не казалась, а казалась проще. Бери и пользуйся, не выёбывайся.