React Router SPA için kaydırma geri yükleme nasıl uygulanır

React tek sayfalık bir uygulama oluşturuyorum ve kaydırma geri yüklemesinin Chrome'da (ve belki de diğer tarayıcılarda) beklendiği gibi çalışmadığını fark ettim.

Reat-router-dom github repo'da, tarayıcıların tek sayfa uygulamaları için kaydırmayı yerel olarak işlemeye başladığını ve davranışı history.scrollRestorationayarlanmışsa geleneksel bir SPA dışı web sayfasınınkine benzer olacağını belirten bir sayfası vardır . auto.

İhtiyacım olan davranış bu sayfada belirtilir:

1. Aşağı doğru kaydırılan yeni bir ekran başlatmamanız için navigasyonda yukarı kaydırma.
2. "Geri" ve "ileri" tıklamalarda pencere ve taşma öğelerinin kaydırma konumlarını geri yükleme (ancak Bağlantı tıklamalarını değil!)

Ancak sekmeler veya bir atlıkarınca içeren yollar için davranışı devre dışı bırakmam gerekiyor.

İşte Chrome'un bu konudaki spesifikasyonlarına bir bağlantı .

OS X için Chrome Sürüm 78.0.3904.97'de (Resmi Derleme) (64 bit) gözlemlediğim şey, history.scrollRestoration manualayardan beklediğim gibi görünüyor . Yani, bir sayfanın yarısında aşağı kaydırdığımda ve bir bağlantıyı tıkladığımda, sonraki sayfa sayfanın yarısında, önceki sayfa ile aynı noktaya kaydırılır.

history.scrollRestorationÇeşitli noktalarda kontrol ettim ve başladığını ve kaldığını buldum auto, varsayılan,

Burada önemli bir nokta TrevorRobinson cevabı @ gelen budur "... ... çoğunlukla tek sayfalık uygulamalar için çalışma yok kaydırma restorasyon tarayıcının otomatik girişimleri ..." Tamam ... devamlı desteği bulundu history.scrollRestoration, ancak Görünüşe göre tarayıcılar aslında kaydırma restorasyon yapıyor berbat. O zaman burada not edilmelidir ki bugün bana zaman kazandıracaktı.

Sonra bunu manuel olarak yapmanın yollarını ararım ve ileriye giden yoldan net değilim. react-router-scrollReact Router v4 ile uyumlu olmadığını, ancak bu sorudan itibaren geçerli olan v5'ten bahsetmediğini söylüyor. Öyleyse v5'in de uyumlu olmadığını varsaymalıyım?

Ben ileriye bir yol nokta ve yaklaşık bu SO cevabını buldu Yani Yönlendirici v4 Tepki ile kaydırma restorasyonu nasıl işleneceğini ... Meli ben farz edecektir Yönlendirici v5 Tepki çalışmak? Güncelleme: v5'te benim için çalışmıyor gibi görünüyor. Birkaç yapılandırma denedim. Ayrıca React Router v4 ile tamamen çalıştıramadım. En azından canlandığını biliyordum, çünkü yeni bir sayfada yukarı doğru kaydırıyor, ancak tarihte geri yükleme gerçekleşmiyor.

Ayrıca tepki-yönlendirici-kaydırma-bellek çalışma aldım , ama sekmeler veya bir atlıkarınca için gerekecek gibi, belirlenmiş rotalarda kaydırma devre dışı bırakmak için seçenekler yok ... Ben sadece çalışması için kesmek olabilir.

Oaf-tepki yönlendirici kullanmayı düşündüm , ancak belgelerde kaydırma geri yüklemesini veya belirli yollar için yukarıdan yukarıya kaydırma özelliğini devre dışı bırakma hakkında hiçbir şey söylemiyor. Düzenleme: Cevabımda belirtildiği gibi, aslında bu işlemek.

Göz ardı ettiğim bir şey var mı? Bu sorunla başa çıkmak için standart nedir, çünkü bu özelliğe ihtiyaç duyan tek kişi ben olamam . Öyle görünüyor ki sinirli ve deneysel bir şey yapıyorum, ancak normal bir site gibi kaydırmak için siteme ihtiyacım var.

Bunu yapmanın bir yolu, oaf-tepki yönlendiricisidir . shouldHandleActionAyarlardaki seçenekleri kullanın . İşlev geçer previousLocationve nextLocationkaydırmanın sıfırlanıp sıfırlanmayacağını belirlemek için kullanabilirsiniz ve falseeğer değilse geri dönün .

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-tepki yönlendirici React Router v4 ve v5 ile çalışır ve birçok SPA yönlendiricisinin çalışmadığı erişilebilirliği yönetir, bu nedenle şu anda en eksiksiz çözüm olabilir.

İlginçtir ki, dokümantasyon bu özellik üzerinde ayrıntılı değildir.

Başka birinin işe yarayan ve daha standart olarak kabul edilecek bir çözümü varsa, lütfen burada bir cevap verin ve seçilen cevabı değiştirmeyi düşüneceğim.