Аудит зависимостей

React Router — это библиотека для организации навигации в приложениях на React. Основная концепция заключается в том, что каждая страница приложения ассоциируется с определённым маршрутом. Компоненты BrowserRouter и Routes формируют основу маршрутизации.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    
      
        } />
        } />
      
    
  );
}

Здесь BrowserRouter создаёт контекст маршрутизации, а Routes содержит набор Route, которые определяют путь и компонент, отображаемый по этому пути.

Динамические маршруты и параметры

Для передачи параметров через URL используется синтаксис :paramName. Эти параметры можно извлекать с помощью хука useParams.

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

function UserProfile() {
  const { userId } = useParams();
  return 
Профиль пользователя: {userId}
;
}

Маршрут с динамическим сегментом задаётся так:

} />

Это позволяет создавать универсальные страницы для различных пользователей, товаров или категорий.

Вложенные маршруты

Вложенные маршруты позволяют строить иерархию страниц и компонентов. Для этого используется элемент Outlet.

import { Outlet, Link } from 'react-router-dom';

function Dashboard() {
  return (
    

      
      
    
  );
}


  }>
    } />
    } />
  

Outlet отображает дочерний маршрут, обеспечивая гибкую структуру страницы.

Навигация программным способом

Для управления переходами внутри приложения используется хук useNavigate.

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

function Login() {
  const navigate = useNavigate();

  function handleLogin() {
    // Логика аутентификации
    navigate('/dashboard');
  }

  return Войти;
}

navigate поддерживает как абсолютные, так и относительные пути, а также возможность замены текущего состояния истории (replace: true).

Редиректы и условная маршрутизация

Для перенаправления на другой маршрут применяется компонент Navigate. Часто используется для защиты маршрутов.

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

function ProtectedRoute({ isAuthenticated, children }) {
  if (!isAuthenticated) {
    return ;
  }
  return children;
}

Комбинируя Navigate с проверкой состояния аутентификации, можно реализовать приватные страницы.

Работа с query-параметрами

Query-параметры позволяют передавать данные через URL без создания отдельных маршрутов.

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

function SearchPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');

  return 
Результаты поиска для: {query}
;
}

Для изменения query-параметров используется метод setSearchParams, что удобно для фильтров и сортировок.

Отложенная загрузка маршрутов

React Router поддерживает ленивую загрузку компонентов через React.lazy и Suspense.

import { lazy, Suspense } from 'react';
const About = lazy(() => import('./About'));


  Загрузка...