React Router предоставляет мощный инструмент для организации навигации внутри одностраничных приложений (SPA). Центральным элементом является компонент , который оборачивает корневой компонент приложения и обеспечивает синхронизацию URL с отображаемыми компонентами. Основной принцип работы — это сопоставление URL с определёнными маршрутами и рендер соответствующих компонентов.

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

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

В этом примере отвечает за выбор маршрута на основе текущего URL, а задаёт путь и компонент, который должен отображаться.

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

React Router позволяет использовать динамические сегменты URL, которые передаются в компонент через объект params.

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

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

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

} />

Здесь :userId — это параметр маршрута, который может принимать любое значение, указанное в URL.

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

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

function Dashboard() {
  return (
    

      
Панель управления
      
    
  );
}

function Stats() {
  return 
Статистика
;
}

function Settings() {
  return 
Настройки
;
}

  }>
    } />
    } />
  

При переходе на /dashboard/stats отображается Dashboard с компонентом Stats внутри .

Программная навигация

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

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

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

  const handleLogin = () => {
    // Выполнение логики аутентификации
    navigate('/dashboard'); // Переход на другой маршрут
  };

  return Войти;
}

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

Защищённые маршруты и редиректы

Для создания защищённых страниц часто используется компонент-обёртка, который проверяет состояние аутентификации и выполняет перенаправление.

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

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

Использование защищённого маршрута:

      
    
  } 
/>

Навигационные хуки и слежение за изменениями URL

React Router предоставляет несколько хуков для работы с навигацией и маршрутизируемыми состояниями:

• useLocation — возвращает объект текущего местоположения { pathname, search, hash, state }.
• useParams — получает параметры маршрута.
• useMatch — проверяет, соответствует ли текущий URL определённому маршруту.
• useNavigationType — позволяет определить тип навигации: POP, PUSH или REPLACE.

Пример использования useLocation для отслеживания query-параметров:

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

function SearchResults() {
  const location = useLocation();
  const params = new URLSearchParams(location.search);
  const query = params.get('q');

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

Lazy Loading и React Router

Для оптимизации загрузки больших приложений часто используют ленивую загрузку маршрутов с React.lazy и .

import { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    Загрузка...