У меня возникают проблемы с позициями прокрутки на кнопке "Назад" (история всплывающих окон) при использовании "реактивного маршрутизатора". React router v4 не обрабатывает управление прокруткой из коробки, потому что браузеры реализуют некоторое автоматическое поведение прокрутки. Это замечательно, если высота окна браузера слишком сильно изменяется с одного взгляда на другое. Я реализовал компонент ScrollToTop, как описано здесь: https://reacttraining.com/react-router/web/guides/scroll-restoration
Это отлично работает. Когда вы нажимаете ссылку и переходите к другому компоненту, браузер прокручивается вверх (например, обычный веб-сайт, обработанный сервером). Проблема возникает, когда вы возвращаетесь (через кнопку назад браузера) к виду с гораздо более высокой высотой окна. Кажется, что (хром) пытается перейти в положение прокрутки предыдущей страницы, прежде чем реакция отобразит контент (и высоту браузера). Это приводит к тому, что прокрутка будет идти так далеко, насколько это возможно, исходя из высоты представления. Представьте этот сценарий:
View1: Длинный список фильмов (высота окна 3500 пикселей).
(клик по клику)
View2: подробный вид выбранного фильма (высота окна: 1000 пикселей).
(Нажата кнопка "Назад в браузере" )
Назад к просмотру 1, но положение прокрутки не может превышать 1000 пикселей, потому что хром пытается установить позицию, прежде чем реагировать, отобразит длинный список фильмов.
По какой-то причине это только проблема в Chrome. Похоже, Firefox и Safari справляются с этим. Интересно, есть ли у кого-то еще эта проблема, и как вы, ребята, обычно обрабатываете восстановление прокрутки в React.
Примечание: все фильмы импортируются из sampleMovies.js - поэтому я не ожидаю ответа API в моем примере.