Come implementare il ripristino scroll per React Router SPA

Sto costruendo un'applicazione React a pagina singola e ho notato che il ripristino dello scorrimento non sembra funzionare come previsto in Chrome (e forse in altri browser).

Sul repository github di reazioni-router-dom, hanno una pagina che dice che i browser stanno iniziando a gestire nativamente lo scorrimento per le app a pagina singola e il comportamento sarebbe simile a quello di una tradizionale pagina Web non SPA, se history.scrollRestorationimpostato su auto.

Il comportamento di cui ho bisogno è indicato in quella pagina:

Scorrendo verso l'alto sulla navigazione in modo da non iniziare una nuova schermata scorrere verso il basso.

Ripristino delle posizioni di scorrimento della finestra e degli elementi di overflow sui clic "indietro" e "avanti" (ma non sui clic Link!)

Ma devo anche disabilitare il comportamento per percorsi che contengono schede o un carosello.

Ecco un link alle specifiche di Chrome sul problema .

Quello che sto osservando in Chrome Versione 78.0.3904.97 (build ufficiale) (64 bit) per OS X, è ciò che sembra essere quello che mi aspetterei history.scrollRestoration manualdall'impostazione. Cioè, quando scorro a metà pagina e faccio clic su un collegamento, la pagina successiva viene fatta scorrere a metà pagina, fino allo stesso punto della pagina precedente.

Ho controllato i history.scrollRestorationvari punti e ho scoperto che inizia e rimane auto, l'impostazione predefinita,

Un punto di significato qui è questo dalla risposta di @ TrevorRobinson "i tentativi automatici del browser di ripristinare lo scorrimento ... ... per lo più non funzionano per le app a pagina singola ..." Ok ... Ho trovato un supporto coerente per history.scrollRestoration, ma a quanto pare i browser sono schifosi a FARE effettivamente il ripristino dello scorrimento. Quindi questo dovrebbe essere notato qui , che mi avrebbe risparmiato tempo oggi.

Quindi cerco i modi per farlo manualmente e non sono chiaro come procedere. react-router-scrolldice che non è compatibile con React Router v4, ma non menziona v5, che è attuale a partire da questa domanda. Quindi dovrei supporre che anche v5 non sia compatibile?

Così guardo oltre per una via d'uscita, e ho trovato questa risposta SO su come gestire scorrimento restauro con Reagire router v4 ... dovrebbe Presumo che sarà lavorare con Reagire Router v5? Aggiornamento: non sembra funzionare per me nella v5. Ho provato diverse configurazioni. Inoltre non sono riuscito a farlo funzionare completamente con React Router v4. Sapevo almeno che si animava, in quanto scorreva in cima a una nuova pagina, ma il ripristino nella storia non si verifica.

Ho anche fatto funzionare la memoria di scorrimento del router di reazione , ma non ha opzioni per disabilitare lo scorrimento su percorsi designati, come quello che sarebbe necessario per le schede o un carosello ... Potrei semplicemente hackerarlo per farlo funzionare.

Ho considerato l'utilizzo di oaf-reagire-router , ma nella documentazione non viene indicato nulla sulla disabilitazione del ripristino dello scorrimento o dello scorrimento verso l'alto per determinati percorsi. Modifica: in realtà gestisce questo, come indicato nella mia risposta.

C'è qualcosa che ho trascurato? Qual è lo standard per affrontare questo problema, perché non posso essere l'unico a aver bisogno di questa funzionalità. Sembra che stia facendo qualcosa di spigoloso e sperimentale, ma ho solo bisogno che il mio sito scorra come un normale sito.

— BBaysinger
fonte

Dovresti dare un'occhiata a Nextjs , hanno implementato questo attraverso la memorizzazione nella cache della cronologia.

— Jurrian,

Freddo! Darò un'occhiata più da vicino quando potrò scendere da questo progetto.

— BBaysinger,

Un modo per farlo è con oaf-reagire-router . Usa le shouldHandleActionopzioni nelle impostazioni. La funzione viene passata previousLocatione nextLocationche è possibile utilizzare per determinare se lo scorrimento deve essere ripristinato / ripristinato e, in falsecaso contrario , restituire .

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-reagire-router funziona con React Router v4 e v5 e gestisce l'accessibilità, dove molti router SPA non lo fanno, quindi al momento potrebbe essere la soluzione più completa.

Curiosamente, la documentazione non elabora questa funzionalità.

Se qualcun altro ha una soluzione che funziona e sarebbe considerata più di uno standard, forniscici una risposta qui e prenderò in considerazione la possibilità di modificare la risposta selezionata.

— BBaysinger
fonte