Маршрутизация как источник истины

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

Ключевой принцип: состояние интерфейса должно полностью отражаться в маршрутах. Любое изменение, которое не синхронизировано с URL, считается потенциальной причиной ошибок и трудной отладки.

Основные компоненты

Оборачивает приложение и обеспечивает работу истории браузера. Использует HTML5 History API для управления адресной строкой.

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

function App() {
  return (
    
      
        {/* маршруты */}
      
    
  );
}

и

Компонент содержит набор , которые определяют соответствие между URL и компонентом.

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

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

Особенности:

• path — путь маршрута, поддерживает динамические параметры.
• element — компонент, который рендерится при совпадении пути.
• выбирает первый совпавший маршрут, поэтому порядок маршрутов важен.

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

Для передачи параметров в URL используются двоеточия:

} />

В компоненте UserProfile параметры можно получить через хук useParams:

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

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

Особенности динамических маршрутов:

• Параметры всегда возвращаются как строки.
• Возможна комбинация динамических и статических сегментов URL.
• Поддерживаются необязательные параметры и “wildcard” (*) для вложенных маршрутов.

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

Вложенные маршруты позволяют строить иерархическую структуру страниц. Родительский компонент рендерит дочерние маршруты с помощью :

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

function Dashboard() {
  return (
    

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


  }>
    } />
    } />
  

Особенности вложенности:

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

Навигация

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

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

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

  return (
    

      Главная
       navigate('/about')}>О нас
    
  );
}

Различия:

• генерирует ссылку и работает как стандартная навигация.
• useNavigate позволяет программно изменять маршрут, передавать состояние и управлять историей (replace, push).

navigate('/products?page=2&filter=popular');

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

function Products() {
  const location = useLocation();
  console.log(location.search); // ?page=2&filter=popular
}

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


  
      
    
  } />

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

Загрузка...