Как прокрутить страницу вверх при переходе в React Router

Быстрый ответ

При каждом переходе между этапами в React Router страница автоматически прокручивается вверх, если используется компонент ScrollToTop:

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

const ScrollToTop = () => {
  const { pathname } = useLocation();

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

  return null;
};

// Разместите <ScrollToTop /> внутри вашего <Router />

Компонент ScrollToTop оптимально обсуживает прокрутку к началу страницы при изменении роута.

Улучшение пользовательского опыта с плавной прокруткой

Для обеспечения плавности переходов между страницами добавьте плавную прокрутку:

useEffect(() => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}, [pathname]);

Параметр behavior: 'smooth' делает движение по странице более плавным, что обеспечивает улучшенный пользовательский опыт при навигации.

Улучшение времени загрузки с использованием useLayoutEffect

Если содержимое страницы динамически изменяется, и его загрузка влияет на высоту страницы, рекомендуется использовать useLayoutEffect:

import { useLayoutEffect } from 'react';

// ... код далее

useLayoutEffect(() => {
  window.scrollTo(0, 0);
}, [pathname]);

useLayoutEffect активируется синхронно, до отрисовки страницы, поэтому не происходит мерцания, что может иметь место при использовании useEffect.

Адаптация для специфических случаев и предотвращение утечки памяти

Для интерфейсов с вкладками, где прокрутка не всегда нужна, можно применить историю переходов:

useEffect(() => {
  const unlisten = history.listen(() => {
    if (shouldScrollToTop(history.location)) {
      window.scrollTo(0, 0);
    }
  });
  
  return () => {
    unlisten();
  };
}, [history]);

Функция shouldScrollToTop определяет, нужна ли прокрутка для конкретного пути.

Визуализация

Визуализируйте переходы по сайту как поездку на американских горках:

1. Старт: Вы переходите на новую страницу.
2. Подъем: Совершается прокрутка страницы.
3. Смена маршрута: Происходит переход на другую страницу.

Без автоматической прокрутки:

🎢🔚📜... (Путешествие останавливается посреди пути)

С автоматической прокруткой в React Router:

🎢🔝📄 (Каждый новый маршрут начинается с вершины)

Прокрутка вверх — это как старт нового приключения на американских горках.

Классовые компоненты: сохраняем плавную прокрутку с помощью componentDidUpdate

В классовых компонентах прокрутку можно реализовать с помощью componentDidUpdate:

import { withRouter } from 'react-router';

class ScrollToTop extends React.Component {
  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return null;
  }
}

export default withRouter(ScrollToTop);

Обработка асинхронных данных: применяем состояние для решения проблемы!

Если вы работаете с асинхронной загрузкой данных, воспользуйтесь useState и useEffect, чтобы организовать прокрутку после полной загрузки данных:

useEffect(() => {
  if (dataLoaded) {
    window.scrollTo(0, 0);
  }
}, [dataLoaded, pathname]);

Статус переменной dataLoaded указывает на завершение загрузки данных.

Полезные материалы

1. Позиция прокрутки в RC1 – Обсуждение работоспособности прокрутки в React Router на GitHub
2. React.Component – React — описание жизненного цикла компонента React.
3. React Router прокручивает вверх при каждом переходе – Stack Overflow — дополнительные варианты решения проблемы, предложенные сообществом.
4. React Router: Декларативный роутинг для React.js — стратегия управления прокруткой в пятой версии React Router.
5. Применение эффектного хука – React — подробное объяснение работы хука useEffect на примере React.