Як здійснити відновлення прокрутки для SPA React Router

Я будую односторінковий додаток React, і я помітив, що відновлення прокрутки не працює так, як очікувалося в Chrome (і, можливо, в інших браузерах.)

На сайті react-router-dom github repo є сторінка, на якій написано, що браузери починають на самому справі прокручувати додатки для однієї сторінки, і поведінка буде подібною до поведінки традиційної веб-сторінки, що не стосується SPA, якщо history.scrollRestorationвстановлено значення auto.

Поведінка, яка мені потрібна, вказана на цій сторінці:

Прокручування навігації, щоб ви не почали новий екран прокручувати донизу.

Відновлення позицій прокрутки вікон та елементів переливу на кліки "назад" та "вперед" (але не "Посилання на кліки!")

Але мені також потрібно відключити поведінку для маршрутів, які містять вкладки або карусель.

Ось посилання на специфікацію Chrome з цього питання .

Що я спостерігаю у версії Chrome 78.0.3904.97 (Офіційна збірка) (64-розрядна) для OS X, - це те, що, напевно, я очікую від history.scrollRestoration manualналаштування. Тобто, коли я прокручую половину сторінки вниз і натискаю посилання, наступна сторінка прокручується на половині сторінки, до тієї ж точки, що і попередня сторінка.

Я перевірив history.scrollRestorationу різних точках і виявив, що він починається та залишається auto, за замовчуванням,

Одним з важливих моментів є це у відповіді @ TrevorRobinson @ "автоматичні спроби браузера відновити прокрутку ... ... в основному не працюють для односторінкових програм ..." Добре ... Я знайшов стійку підтримку history.scrollRestoration, але мабуть, браузери хитрі, насправді РОБОТИ відновлення прокрутки. Тоді тут слід зазначити , що сьогодні заощадило б мені час.

Потім я шукаю способи зробити це вручну, і мені не зрозуміло шляху вперед. react-router-scrollкаже, що він не сумісний з React Router v4, але не згадує v5, що є актуальним для цього питання. Тож чи варто вважати, що v5 також не сумісний?

Тож я шукаю подальший шлях уперед і знайшов цю ТАКУ відповідь про те, як обробити відновлення прокрутки за допомогою React Router v4 ... Чи слід вважати, що буде працювати з React Router v5? Оновлення: Схоже, він не працює для мене в v5. Я спробував кілька конфігурацій. Я також не зміг повністю працювати з React Router v4. Я знав, що воно оживає принаймні, так як це прокручування вгору на новій сторінці, але відновлення в історії не відбувається.

У мене також працювала пам'ять реакцій-маршрутизатора-прокрутки , але у неї немає варіантів відключення прокрутки за визначеними маршрутами, як, наприклад, те, що потрібно для вкладок або каруселі ... Я можу просто зламати його, щоб він працював.

Я розглядав можливість використання маршрутизатора Oaf-react , але в документації нічого не сказано про відключення відновлення прокрутки або прокручування до верху для певних маршрутів. Редагувати: Це насправді справляється з цим, як викладено у моїй відповіді.

Чи є щось, що я не помітив? Який стандарт для вирішення цього питання, тому що я не можу бути єдиним, хто потребує цієї функції. Здається, я роблю щось пізнє і експериментальне, але мені просто потрібен мій сайт, щоб прокрутити як звичайний сайт.

— BBaysinger
джерело

Ви повинні подивитися Nextjs , вони реалізували це через кешування історії.

— Юрріан

Класно! Я детальніше ознайомлюсь, коли зможу зійти з цього проекту.

— BBaysinger

Один із способів зробити це - за допомогою маршрутизатора Oaf-react . Використовуйте shouldHandleActionпараметри в налаштуваннях. Функція передається previousLocationі nextLocationяку ви можете використовувати, щоб визначити, чи слід прокрутити / відновити прокрутку, а falseякщо ні - повернути .

const history = createBrowserHistory();

const settings = {
   shouldHandleAction: (previousLocation, nextLocation) => {
       // Inspect/compare nextLocation and/or previousLocation.
       return false // false if you don't want scroll restoration.
   }
};

wrapHistory(history, settings);

oaf-react-router працює з React Router v4 та v5 та обробляє доступність, де багато SPA маршрутизатори цього не роблять, тому це може бути найповнішим рішенням на даний момент.

Цікаво, що в цій документації немає детальної інформації.

Якщо у когось іншого є рішення, яке працює і вважатиметься більш стандартним, будь ласка, надайте тут відповідь, і я розглядаю можливість змінити обрану відповідь.

— BBaysinger
джерело