Добавляются ли какие-либо хуки к компоненту если подключен роутер в приложении?
Хуки
Сам факт подключения роутера хуков к компонентам «не добавляет», но провайдер роутера (через контекст) делает доступными хуки роутинга, которыми компоненты могут пользоваться.
Как это устроено
<BrowserRouter> (или RouterProvider) кладёт в контекст состояние навигации: текущий location, параметры, методы перехода. Любой компонент внутри провайдера может вызвать хуки React Router:
import { useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom';
const ProductPage = () => {
const { id } = useParams(); // /products/:id → id
const navigate = useNavigate(); // программные переходы
const location = useLocation(); // текущий URL, state
const [searchParams, setSearchParams] = useSearchParams(); // ?query=...
return <button onClick={() => navigate('/cart')}>В корзину</button>;
};Вне провайдера эти хуки бросают ошибку — им неоткуда взять контекст.
Основные хуки React Router
- useParams — динамические сегменты пути.
- useNavigate — переходы: navigate('/path'), navigate(-1).
- useLocation — pathname, search, hash, state; удобно для эффектов «на смену страницы».
- useSearchParams — чтение/запись query string.
- useMatch, useOutletContext, useRouteError, в data-режиме — useLoaderData/useActionData.
Следствие для ререндеров
Компоненты, использующие эти хуки, подписываются на контекст роутера: например, useLocation вызывает ререндер при каждой смене URL. Поэтому хуки роутера стоит вызывать там, где они нужны, а не «на всякий случай» в корневых компонентах.
Коротко для собеседования
Роутер не «вешает» хуки на компоненты, а через провайдер-контекст открывает доступ к своим хукам: useParams, useNavigate, useLocation, useSearchParams. Вне провайдера они падают; использующие их компоненты подписываются на изменения навигации и ререндерятся при смене URL.