ScrollRestoration компонент

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

Основное назначение

По умолчанию, при переходе на новую страницу браузер перемещает прокрутку в верхнюю часть документа. Однако в приложениях с динамическим контентом или сложной маршрутизацией такое поведение не всегда желательное. ScrollRestoration позволяет:

  • Восстанавливать позицию прокрутки при возврате на предыдущую страницу.
  • Управлять поведением прокрутки при переходах на новые маршруты.
  • Сохранять независимую прокрутку для разных вкладок и секций.

Импорт и базовое использование

Компонент импортируется из пакета react-router-dom:

import { ScrollRestoration } from "react-router-dom";

В базовой конфигурации компонент добавляется в дерево маршрутов:

<BrowserRouter>
  <ScrollRestoration />
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</BrowserRouter>

При такой установке ScrollRestoration автоматически сохраняет позицию прокрутки для всех маршрутов и восстанавливает её при возврате.

Свойства компонента

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

  • getKey (location, matches) => string Позволяет определить уникальный ключ для каждого маршрута. Используется для управления сохранёнными позициями прокрутки. Пример:
<ScrollRestoration getKey={(location) => location.pathname} />
  • storageKey string Позволяет задать ключ для хранения позиций прокрутки, если требуется использовать локальное или сессионное хранилище.
<ScrollRestoration storageKey="my-app-scroll" />
  • shouldRestoreScroll (location, savedPosition) => boolean Функция, которая возвращает true или false в зависимости от того, нужно ли восстанавливать прокрутку. Можно использовать для условного управления восстановлением, например, игнорируя определённые маршруты.
<ScrollRestoration
  shouldRestoreScroll={(location, savedPosition) => !location.pathname.startsWith("/modal")}
/>

Работа с динамическим контентом

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

useEffect(() => {
  window.scrollTo(0, savedPosition || 0);
}, [savedPosition]);

Однако использование ScrollRestoration упрощает этот процесс, так как он автоматически отслеживает маршруты и запоминает позиции, если данные подгружаются до завершения перехода.

Сценарии применения

  1. Навигация “назад” и “вперед” в браузере При возврате на предыдущий маршрут прокрутка автоматически возвращается на ту позицию, на которой пользователь находился, предотвращая неудобства при длинных страницах.

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

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

Взаимодействие с другими компонентами

ScrollRestoration отлично сочетается с:

  • Routes и Route — обеспечивает управление прокруткой при любых переходах между маршрутами.
  • Outlet — позволяет работать с вложенными маршрутами, сохраняя прокрутку для родительских и дочерних компонентов.
  • Кастомными компонентами навигации — благодаря функции getKey можно создавать уникальные сценарии для отдельных секций приложения.

Практические рекомендации

  • Размещать компонент один раз на уровне маршрутизатора (BrowserRouter или HashRouter), чтобы избежать конфликтов.
  • Использовать getKey для сложных приложений с динамическими маршрутами, чтобы каждая страница имела уникальную позицию прокрутки.
  • Совмещать с lazy-loading компонентами, учитывая время рендеринга, чтобы позиция прокрутки восстанавливалась корректно.
  • Для пользовательских интерфейсов с фиксированными панелями и скроллами внутри отдельных элементов можно создавать кастомное восстановление прокрутки с помощью useLayoutEffect совместно с ScrollRestoration.

ScrollRestoration значительно упрощает контроль за прокруткой в React-приложениях, обеспечивая плавный пользовательский опыт при навигации, особенно в сложных SPA с динамическим контентом и вложенной маршрутизацией.

Оглавление