Bagaimana menerapkan restorasi gulir untuk React Router SPA

Saya sedang membangun aplikasi Bereaksi satu halaman, dan saya perhatikan pemulihan gulir tampaknya tidak berfungsi seperti yang diharapkan di Chrome (dan mungkin browser lain.)

Pada repo-router-dom github repo, mereka memiliki halaman yang mengatakan bahwa browser mulai secara alami menangani pengguliran untuk aplikasi halaman tunggal, dan perilaku akan mirip dengan halaman web tradisional non-SPA, jika history.scrollRestorationdiatur ke auto.

Perilaku yang saya butuhkan ditunjukkan pada halaman itu:

Menggulir ke atas pada navigasi sehingga Anda tidak memulai layar baru digulir ke bawah.

Mengembalikan posisi gulir jendela dan elemen melimpah pada klik "kembali" dan "maju" (tetapi bukan Tautan klik!)

Tapi saya juga perlu menonaktifkan perilaku untuk rute yang berisi tab atau korsel.

Berikut tautan ke spesifikasi Chrome tentang masalah ini .

Apa yang saya amati di Versi Chrome 78.0.3904.97 (Pembuatan Resmi) (64-bit) untuk OS X, adalah apa yang tampaknya menjadi apa yang saya harapkan dari history.scrollRestoration manualpengaturan. Yaitu, ketika saya menggulir setengah halaman ke bawah, dan saya mengklik sebuah tautan, halaman berikutnya digulir setengah ke bawah halaman, ke titik yang sama dengan halaman sebelumnya.

Saya telah memeriksa history.scrollRestorationdi berbagai titik dan menemukannya mulai dan tetap auto, default,

Satu hal penting di sini adalah dari jawaban @ TrevorRobinson "upaya otomatis peramban dalam restorasi gulir ... ... sebagian besar tidak berfungsi untuk aplikasi satu halaman ..." Oke ... Saya menemukan dukungan yang konsisten untuk history.scrollRestoration, tetapi tampaknya browser benar-benar buruk dalam melakukan restorasi gulir. Maka itu harus dicatat di sini , yang akan menghemat waktu saya hari ini.

Lalu saya mencari cara untuk melakukan ini secara manual, dan saya tidak tahu jalan ke depan. react-router-scrollmengatakan itu tidak kompatibel dengan React Router v4, tetapi tidak menyebutkan v5, yang saat ini sebagai pertanyaan ini. Jadi haruskah saya menganggap v5 juga tidak kompatibel?

Jadi saya mencari lebih jauh ke depan, dan menemukan jawaban SO ini tentang cara menangani restorasi gulir dengan React Router v4 ... Haruskah saya berasumsi bahwa ini akan bekerja dengan React Router v5? Pembaruan: Tampaknya tidak berfungsi untuk saya di v5. Saya mencoba beberapa konfigurasi. Saya juga tidak bisa sepenuhnya bekerja dengan React Router v4. Saya tahu itu menjadi hidup setidaknya, seperti itu bergulir ke atas pada halaman baru, tetapi pemulihan dalam sejarah tidak terjadi.

Saya juga mendapatkan reaksi-router-gulir-memori yang berfungsi, tetapi tidak memiliki opsi untuk menonaktifkan pengguliran pada rute yang ditentukan, seperti apa yang akan diperlukan untuk tab atau korsel ... Saya mungkin meretasnya untuk membuatnya bekerja.

Saya mempertimbangkan untuk menggunakan oaf-react-router , tetapi tidak mengatakan apa-apa dalam dokumentasi tentang menonaktifkan restorasi gulir atau scroll-to-top untuk rute tertentu. Sunting: Ini benar-benar menangani ini, seperti yang dijabarkan dalam jawaban saya.

Apakah ada sesuatu yang saya abaikan? Apa standar untuk menangani masalah ini, karena saya bukan satu-satunya yang membutuhkan fitur ini. Sepertinya saya melakukan sesuatu yang gelisah dan eksperimental, tetapi saya hanya perlu situs saya untuk menggulir seperti situs normal.

— BBaysinger
sumber

Anda harus melihat Nextjs , mereka menerapkan ini melalui caching sejarah.

— Jurrian

Keren! Saya akan melihat lebih dekat ketika saya bisa turun dari proyek ini.

— BBaysinger

Salah satu cara untuk melakukan ini adalah dengan oaf-react-router . Gunakan shouldHandleActionopsi dalam pengaturan. Fungsi dilewatkan previousLocationdan nextLocationyang dapat Anda gunakan untuk menentukan apakah gulir harus diatur ulang / dikembalikan, dan kembali falsejika tidak.

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 bekerja dengan React Router v4 dan v5, dan menangani aksesibilitas, di mana banyak router SPA tidak, jadi ini mungkin solusi yang paling lengkap saat ini.

Anehnya, dokumentasi ini tidak menguraikan fitur ini.

Jika ada orang lain yang memiliki solusi yang berfungsi dan akan dianggap lebih dari standar, berikan jawaban di sini, dan saya akan mempertimbangkan untuk mengubah jawaban yang dipilih.

— BBaysinger
sumber