Библиотеки для анимации переходов

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

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

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

Ключевые моменты:

  • Routes заменяет устаревший Switch и отвечает за выбор активного маршрута.
  • Route определяет путь (path) и компонент (element) для отображения.
  • Link создаёт ссылки без перезагрузки страницы, что обеспечивает SPA-поведение.
  • Navigate позволяет программно перенаправлять пользователя.

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

React Router поддерживает динамические сегменты пути с помощью :param. Значения параметров можно извлекать через хук useParams.

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

function Product() {
  const { id } = useParams();
  return 
Товар с ID: {id}
;
}

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

  • Параметры автоматически обновляются при смене URL.
  • Можно комбинировать несколько динамических сегментов, например: /category/:categoryId/product/:productId.

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

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

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

function Dashboard() {
  return (
    

      
      
    

  );
}

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

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

  • Outlet выступает как плейсхолдер для дочерних маршрутов.
  • Позволяет строить сложные интерфейсы с повторно используемыми компонентами верхнего уровня.

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

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

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

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

  function handleLogin() {
    // Проверка логина
    navigate('/dashboard');
  }

  return ;
}

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

  • Поддерживает переходы с заменой истории (replace: true) или добавлением в стек (push по умолчанию).
  • Работает с динамическими параметрами: navigate(/product/${id}).

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

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

function PrivateRoute({ element }) {
  const isAuthenticated = useAuth();
  return isAuthenticated ? element : ;
}

  } />} />

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

  • Логика проверки вынесена в отдельный компонент.
  • Позволяет централизованно управлять доступом к маршрутам.

Ленивая загрузка маршрутов

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

import React, { Suspense, lazy } from 'react';

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

function App() {
  return (
    
      Загрузка...
}> } /> ); }

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

  • Компоненты подгружаются только при необходимости.
  • Suspense обеспечивает отображение резервного контента во время загрузки.

Анимация переходов между маршрутами

Для добавления плавных анимаций используют сторонние библиотеки, например Framer Motion. React Router совместим с такими библиотеками через обёртки компонентов маршрутов.

import { motion } from 'framer-motion';
import { Routes, Route, useLocation } from 'react-router-dom';

function AnimatedRoutes() {
  const location = useLocation();

  return (
    
      
            
          
        }
      />
      
            
          
        }
      />
    
  );
}

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

  • key={location.pathname} необходим для корректного перезапуска анимации при смене маршрута.
  • Использование initial, animate и exit позволяет создавать плавные эффекты входа и выхода компонентов.

Сохранение состояния при навигации

React Router предоставляет возможность сохранять состояние между маршрутами через state в navigate и location.

navigate('/checkout', { state: { cart: currentCart } });

function Checkout() {
  const location = useLocation();
  console.log(location.state.cart);
}

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

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

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

Для обработки query-параметров используют объект URLSearchParams вместе с useLocation.

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

function Search() {
  const { search } = useLocation();
  const query = new URLSearchParams(search);
  const term = query.get('q');
  return 
Результаты поиска для: {term}
;
}

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

  • Query-параметры можно читать и обновлять без перезагрузки страницы.
  • Удобно для фильтров, поиска и динамических запросов к API.
Оглавление