ScrollRestoration react-router-dom V6

react-router-dom V6

以下测试环境为微信内的浏览器

在移动端使用<ScrollRestoration>搭配<Link>组件跳转时,可记录之前的滑动位置

浏览器自带的返回按钮不受影响,只影响<Link>组件互相跳转时恢复位置

如A页面向下滑动一些后,点击<Link>跳转到B页面,然后在B页面点击<Link>标签回到A页面时,会在上次滑动的位置出现

参考资料

| React Router6 中文文档

官方例子

https://github.com/remix-run/react-router/tree/main/examples/scroll-restoration

router.jsx

 在Test和About组件内加入以下代码,放在根div内即可

 <ScrollRestoration getKey={(location, matches) => {
        console.log('======matches', matches);
        return location.pathname;
      }}></ScrollRestoration>

实参matches里有上述handle的值,可加入自己的一些参数

实操后的总结:

以上述官方例子来说,

ScrollRestoration适用于已在路由中配置了loader函数的组件,

getKey方法返回location.pathname,那么点击Link组件来回跳转时,会恢复为上次位置.

如果返回location.key,那么只有点击浏览器自带的返回与前进按钮,才会恢复为上次位置.因为每次点击Link时,路由的key会变,只有点击浏览器自带的前进与返回,key才不会变.

如果页面一开始加载的数据是通过useEffect发起的异步加载,那么页面一开始无数据,导致无法恢复滚动位置,导致ScrollRestoration不起作用