Что такое React Router и для чего он используется?react-26

React Router — это популярная библиотека для навигации (маршрутизации) в React-приложениях. Она позволяет создавать одностраничные приложения (SPA — Single Page Application) с динамической загрузкой контента без полной перезагрузки страницы.

Основные возможности

1. Клиентская маршрутизация (Client-Side Routing):
   Позволяет менять URL в браузере и отображать соответствующие компоненты без запросов к серверу.

2. Динамические роуты (Dynamic Routing):
   Маршруты определяются "на лету" во время рендеринга приложения (в отличие от статической конфигурации).

3. Вложенные роуты (Nested Routes):
   Поддержка иерархической структуры маршрутов, что упрощает организацию сложных интерфейсов.

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

import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';

1. <BrowserRouter>
   Обеспечивает синхронизацию истории браузера с React-приложением. Обычно оборачивает всё приложение.

2. <Routes> и <Route>

   • <Routes> — контейнер для маршрутов (аналог Switch в v5)
   • <Route> определяет соответствие между path и компонентом
     Пример:

   <Routes>
     <Route path="/" element={<HomePage />} />
     <Route path="/about" element={<AboutPage />} />
   </Routes>
   

3. <Link>
   Альтернатива HTML-тегу <a> для навигации без перезагрузки страницы:

   <Link to="/about">О нас</Link>
   

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

1. Базовый роутинг

   function App() {
     return (
       <BrowserRouter>
         <nav>
           <Link to="/">Главная</Link>
           <Link to="/dashboard">Дашборд</Link>
         </nav>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/dashboard" element={<Dashboard />} />
         </Routes>
       </BrowserRouter>
     );
   }
   

2. Динамические параметры
   Доступ к параметрам URL через хук useParams:

   // Маршрут
   <Route path="/users/:id" element={<UserProfile />} />
   
   // Компонент
   function UserProfile() {
     const { id } = useParams();
     return <div>Профиль пользователя {id}</div>;
   }
   

3. Защищённые маршруты (Protected Routes)
   Реализация приватных страниц (например, для авторизованных пользователей):

   function PrivateRoute({ children }) {
     const isAuth = useAuth(); // Ваша логина авторизации
     return isAuth ? children : <Navigate to="/login" />;
   }
   
   // Использование
   <Route path="/admin" element={<PrivateRoute><AdminPanel /></PrivateRoute>} />
   

Важные хуки

1. useNavigate
   Программная навигация:

   const navigate = useNavigate();
   navigate('/login'); // Перенаправление
   

2. useLocation
   Доступ к текущему location (объект с pathname, search, hash):

   const location = useLocation();
   console.log(location.pathname); // '/about'
   

3. useSearchParams
   Работа с query-параметрами:

   const [searchParams, setSearchParams] = useSearchParams();
   const page = searchParams.get('page'); // ?page=2
   

Отличия v6 от v5

1. <Switch> заменён на <Routes>
2. component={Profile} заменён на element={<Profile />}
3. Упрощён синтаксис вложенных роутов
4. Хук useHistory заменён на useNavigate

Резюмируем

• React Router — стандарт де-факто для маршрутизации в React-приложениях
• Позволяет создавать SPA с "настоящим" URL и историей браузера
• Основные компоненты: Router, Route, Routes, Link
• Основные хуки: useNavigate, useParams, useLocation
• Актуальная версия (v6) предлагает более простой и мощный API по сравнению с v5

Для большинства React-проектов это оптимальный выбор для реализации навигации.