Координация анимаций и навигации

React Router предоставляет механизмы для управления маршрутизацией в одностраничных приложениях на React. Ключевыми компонентами являются <BrowserRouter>, <Routes>, <Route> и <Link>. <BrowserRouter> обеспечивает работу истории браузера, <Routes> служит контейнером для определения маршрутов, а <Route> описывает соответствие пути и компонента, который должен рендериться. <Link> используется для навигации между страницами без полной перезагрузки приложения.

Пример базовой маршрутизации:

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Главная</Link>
        <Link to="/about">О нас</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

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

Для плавного визуального перехода между страницами часто используется библиотека react-transition-group. Она позволяет создавать эффекты появления, исчезания и изменения компонентов при изменении маршрута.

Пример интеграции анимации с React Router:

import { CSSTransition, TransitionGroup } from 'react-transition-group';
import { useLocation, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import './animations.css';

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

  return (
    <TransitionGroup>
      <CSSTransition key={location.pathname} classNames="fade" timeout={300}>
        <Routes location={location}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </CSSTransition>
    </TransitionGroup>
  );
}

CSS-анимации для плавного перехода:

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

Управление синхронизацией анимации и навигации

При интеграции анимаций и маршрутизации важно учитывать, что переход между страницами должен завершаться синхронно с анимацией. Использование CSSTransition с TransitionGroup автоматически отслеживает состояние компонента и позволяет контролировать момент его удаления из DOM после завершения анимации.

Для более сложных сценариев, когда анимация должна влиять на состояние приложения (например, предзагрузка данных перед отображением нового компонента), используется хук useNavigate и колбэки жизненного цикла анимации:

import { useNavigate } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';

function AnimatedLink({ to, children }) {
  const navigate = useNavigate();
  const [animate, setAnimate] = React.useState(false);

  const handleClick = (e) => {
    e.preventDefault();
    setAnimate(true);
  };

  return (
    <CSSTransition in={animate} timeout={300} classNames="fade" onExi ted={() => navigate(to)}>
      <a href={to} onCl ick={handleClick}>{children}</a>
    </CSSTransition>
  );
}

Здесь переход происходит только после завершения анимации исчезновения текущего компонента, что обеспечивает более гладкое визуальное впечатление.

Использование контекста для управления глобальными анимациями

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

const AnimationContext = React.createContext();

export function AnimationProvider({ children }) {
  const [animating, setAnimating] = React.useState(false);

  return (
    <AnimationContext.Provider value={{ animating, setAnimating }}>
      {children}
    </AnimationContext.Provider>
  );
}

Внутри компонентов маршрутов можно использовать этот контекст для приостановки навигации до завершения анимации:

const { setAnimating } = React.useContext(AnimationContext);

const handleRouteChange = (nextPath) => {
  setAnimating(true);
  setTimeout(() => {
    navigate(nextPath);
    setAnimating(false);
  }, 300); // время анимации
};

Управление анимацией при динамических маршрутах

React Router поддерживает динамические маршруты с параметрами (:id, :slug), и важно, чтобы анимации корректно обрабатывали их. При смене динамического параметра компонент может оставаться тем же, но содержимое должно меняться с анимацией. Для этого используется ключ, зависящий от параметра:

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

function UserProfile() {
  const { userId } = useParams();

  return (
    <CSSTransition key={userId} timeout={300} classNames="fade">
      <div>Профиль пользователя {userId}</div>
    </CSSTransition>
  );
}

Совмещение анимации, переходов и асинхронной загрузки

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

const [data, setData] = React.useState(null);
const [loading, setLoading] = React.useState(true);

React.useEffect(() => {
  setLoading(true);
  fetchData().then(response => {
    setData(response);
    setLoading(false);
  });
}, [currentRoute]);

return (
  <CSSTransition in={!loading} timeout={300} classNames="fade">
    <div>{loading ? 'Загрузка...' : <Component data={data} />}</div>
  </CSSTransition>
);

Такой подход обеспечивает плавный переход и синхронизацию между визуальной анимацией и состоянием данных, предотвращая мерцание и резкие изменения контента.

Оглавление