Cómo implementar la restauración de desplazamiento para React Router SPA

Estoy creando una aplicación React de una sola página, y he notado que la restauración de desplazamiento no parece funcionar como se esperaba en Chrome (y tal vez en otros navegadores).

En el repositorio github react-router-dom, tienen una página que dice que los navegadores están comenzando a manejar de forma nativa el desplazamiento para aplicaciones de una sola página, y el comportamiento sería similar al de una página web tradicional que no es SPA, si history.scrollRestorationestá configurado en auto.

El comportamiento que necesito se indica en esa página:

1. Desplazarse hacia arriba en la navegación para que no comience una nueva pantalla desplazada hacia abajo.
2. Restaurar las posiciones de desplazamiento de la ventana y los elementos de desbordamiento en los clics "hacia atrás" y "hacia adelante" (¡pero no en los clics de enlace!)

Pero también necesito deshabilitar el comportamiento de las rutas que contienen pestañas o un carrusel.

Aquí hay un enlace a las especificaciones de Chrome sobre el tema .

Lo que estoy observando en Chrome versión 78.0.3904.97 (versión oficial) (64 bits) para OS X, es lo que parece ser lo que esperaría de la history.scrollRestoration manualconfiguración. Es decir, cuando me desplazo hacia la mitad de una página y hago clic en un enlace, la página siguiente se desplaza hacia la mitad de la página, hasta el mismo punto que la página anterior.

Lo he comprobado history.scrollRestorationen varios puntos y encuentro que comienza y permanece auto, el valor predeterminado,

Un punto importante aquí es el de la respuesta de @TrevorRobinson "los intentos automáticos del navegador para la restauración de desplazamiento ... ... en su mayoría no funcionan para aplicaciones de una sola página ..." Ok ... Encontré soporte constante para history.scrollRestoration, pero Aparentemente, los navegadores son malos al REALIZAR la restauración del desplazamiento. Entonces eso debería notarse aquí , lo que me habría ahorrado tiempo hoy.

Luego busco formas de hacer esto manualmente, y no tengo claro el camino a seguir. react-router-scrolldice que no es compatible con React Router v4, pero no menciona v5, que es actual a partir de esta pregunta. Entonces, ¿debo suponer que v5 tampoco es compatible?

Así que miro más de un camino a seguir, y encontré este SO respuesta acerca de cómo manejar el desplazamiento restauración con Reaccionar Router v4 ... ¿Debo suponer que va a trabajar con Reaccionar Router v5? Actualización: no parece funcionar para mí en v5. Intenté varias configuraciones. Tampoco pude hacerlo funcionar completamente con React Router v4. Sabía que al menos cobró vida, ya que se desplaza hacia arriba en una nueva página, pero la restauración en la historia no ocurre.

También conseguí que funcione la memoria reaccionar-enrutador-desplazamiento , pero no tiene opciones para deshabilitar el desplazamiento en rutas designadas, como lo que se necesitaría para pestañas o un carrusel ... Podría piratearlo para que funcione.

Consideré usar oaf-react-router , pero no dice nada en la documentación sobre cómo deshabilitar la restauración de desplazamiento o desplazarse hacia arriba para ciertas rutas. Editar: En realidad maneja esto, como se describe en mi respuesta.

¿Hay algo que haya pasado por alto? ¿Cuál es el estándar para tratar este problema? Porque no puedo ser el único que necesita esta función. Parece que estoy haciendo algo nervioso y experimental, pero solo necesito que mi sitio se desplace como un sitio normal.

Una forma de hacerlo es con oaf-react-router . Use las shouldHandleActionopciones en la configuración. La función se aprueba previousLocationy nextLocationpuede usarla para determinar si el desplazamiento debe reiniciarse / restaurarse, y regresar falsesi no.

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 funciona con React Router v4 y v5, y maneja la accesibilidad, donde muchos enrutadores SPA no lo hacen, por lo que puede ser la solución más completa en este momento.

Curiosamente, la documentación no detalla esta característica.

Si alguien más tiene una solución que funciona y se consideraría más un estándar, proporcione una respuesta aquí, y consideraré cambiar la respuesta seleccionada.