Какие знаешь хуки для подключения роутера?

Хуки React Router для подключения и управления роутингом

React Router (начиная с v5) предоставляет набор хуков, которые позволяют работать с маршрутизацией внутри функциональных компонентов, заменяя устаревшие HOC и рендер-пропсы. Вот основные хуки, которые я использую в разработке:

Основные хуки для доступа к роутеру

1. useHistory (в v5) / useNavigate (в v6+)

import { useNavigate, useLocation } from 'react-router-dom';

function Component() {
  const navigate = useNavigate();
  const location = useLocation();
  
  const handleClick = () => {
    // Навигация с помощью хука
    navigate('/profile', { state: { from: location.pathname } });
  };
  
  return <button onClick={handleClick}>Перейти в профиль</button>;
}

2. useLocation

import { useLocation } from 'react-router-dom';

function AnalyticsTracker() {
  const location = useLocation();
  
  useEffect(() => {
    // Отслеживание изменений пути
    analytics.trackPageView(location.pathname);
  }, [location]);
  
  return null;
}

3. useParams

import { useParams } from 'react-router-dom';

function UserProfile() {
  const { userId, tab } = useParams(); // Извлекаем параметры из пути
  
  useEffect(() => {
    if (userId) {
      fetchUserData(userId);
    }
  }, [userId]);
  
  return <div>Профиль пользователя: {userId}</div>;
}

4. useRouteMatch (в v5)

import { useRouteMatch } from 'react-router-dom';

function NestedComponent() {
  const match = useRouteMatch('/users/:id');
  
  // match содержит информацию о текущем совпадении пути
  console.log(match.params, match.path, match.url);
  
  return match ? <div>Пользователь найден</div> : null;
}

Хуки для вложенных маршрутов и контекста

5. useRoutes (v6+)

import { useRoutes } from 'react-router-dom';

function App() {
  const routes = useRoutes([
    { path: '/', element: <Home /> },
    { path: 'users', element: <Users />, 
      children: [
        { path: ':id', element: <UserProfile /> },
        { path: 'new', element: <NewUser /> }
      ]
    }
  ]);
  
  return routes;
}

6. useOutlet (v6+)

import { useOutlet } from 'react-router-dom';

function Layout() {
  const outlet = useOutlet();
  
  return (
    <div className="layout">
      <header>Шапка сайта</header>
      <main>{outlet}</main> {/* Здесь отрисуется вложенный компонент */}
      <footer>Подвал</footer>
    </div>
  );
}

7. useOutletContext (v6+)

// Родительский компонент передает контекст
function Parent() {
  const [theme, setTheme] = useState('light');
  
  return (
    <Outlet context={{ theme, setTheme }} />
  );
}

// Дочерний компонент получает контекст
function Child() {
  const { theme, setTheme } = useOutletContext();
  
  return <div>Текущая тема: {theme}</div>;
}

Хуки для навигационного состояния

8. useSearchParams (v6+)

import { useSearchParams } from 'react-router-dom';

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  
  const updateQuery = (newQuery) => {
    setSearchParams({ q: newQuery, sort: 'date' });
  };
  
  return (
    <input 
      value={query}
      onChange={(e) => updateQuery(e.target.value)}
    />
  );
}

9. useNavigationType (v6+)

import { useNavigationType } from 'react-router-dom';

function NavigationLogger() {
  const navigationType = useNavigationType();
  // Возвращает: POP, PUSH, REPLACE
  
  useEffect(() => {
    if (navigationType === 'PUSH') {
      console.log('Новая навигация');
    }
  }, [navigationType]);
  
  return null;
}

Практические паттерны использования

Кастомный хук для проверки активного пути:

import { useLocation, matchPath } from 'react-router-dom';

function useActivePath(pattern) {
  const location = useLocation();
  return matchPath(pattern, location.pathname);
}

// Использование:
function NavLink() {
  const isActive = useActivePath('/dashboard/*');
  return <Link className={isActive ? 'active' : ''}>Dashboard</Link>;
}

Хук для сохранения состояния при навигации:

import { useLocation, useNavigate } from 'react-router-dom';

function usePersistentState(key, initialValue) {
  const location = useLocation();
  const navigate = useNavigate();
  
  const [state, setState] = useState(() => {
    const stateFromLocation = location.state?.[key];
    return stateFromLocation || initialValue;
  });
  
  const setPersistentState = (newValue) => {
    setState(newValue);
    navigate(location.pathname, {
      state: { ...location.state, [key]: newValue },
      replace: true
    });
  };
  
  return [state, setPersistentState];
}

Критические отличия между версиями

• React Router v5: Использует useHistory, useRouteMatch
• React Router v6: Переход на useNavigate, useRoutes, добавление useOutletContext
• Основной принцип: Все хуки предоставляют доступ к роутерному контексту, который создается компонентами <BrowserRouter>, <HashRouter> или <MemoryRouter>

Важное правило: Хуки роутера работают только внутри компонентов, которые находятся внутри Router Provider. Попытка использовать их вне этого контекста вызовет ошибку.

Эти хуки значительно упрощают работу с маршрутизацией, делают код чище и позволяют избежать проблем с prop drilling, предоставляя прямой доступ к роутерному состоянию в любом месте дерева компонентов.