PassFront
  1. PassFront
  2. База знаний
  3. Хуки

Добавляются ли какие-либо хуки к компоненту если подключен роутер в приложении?

Хуки

Сам факт подключения роутера хуков к компонентам «не добавляет», но провайдер роутера (через контекст) делает доступными хуки роутинга, которыми компоненты могут пользоваться.

Как это устроено

<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.

Другие вопросы раздела