React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

 

 

2018年12月17日更新：

修复在qq浏览器下执行pop跳转时页面错位问题

本文的代码已封装为npm包发布：react-slide-animation-router

 

在React Router中，想要做基于路由的左右滑动，我们首先得搞清楚当发生路由跳转的时候到底发生了什么，和路由动画的原理。

首先我们要先了解一个概念：history。history原本是内置于浏览器内的一个对象，包含了一些关于历史记录的一些信息，但本文要说的history是React-Router中内置的history，每一个路由页面在props里都可以访问到这个对象，它包含了跳转的动作（action）、触发跳转的listen函数、监听每次跳转的方法、location对象等。其中的location对象描述了当前页面的pathname、querystring和表示当前跳转结果的key属性。其中key属性只有在发生跳转后才会有。

了解完history后，我们再来复习一下react router跳转的流程。

当没有使用路由动画的时候，页面跳转的流程是：

用户发出跳转指令 -> 浏览器历史接到指令，发生改变 -> 旧页面销毁，新页面应用到文档，跳转完成

当使用了基于React-Transition-Group的路由动画后，跳转流程将变为：

用户发出跳转指令 -> 浏览器历史接到指令，发生改变 -> 新页面插入到旧页面的同级位置之前 -> 等待时间达到在React-Transition-Group中设置的timeout后，旧页面销毁，跳转完成。

当触发跳转后，页面的url发生改变，如果之前有在history的listen方法上注册过自己的监听函数，那么这个函数也将被调用。但是hisory要在组件的props里才能获取到，为了能在组件外部也能获取到history对象，我们就要安装一个包：https://github.com/ReactTraining/history。用这个包为我们创建的history替换掉react router自带的history对象，我们就能够在任何地方访问到history对象了。

import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory()
<Router history={history}>
    ....
</Router>

这样替换就完成了。注册listener的方法也很简单：history.listen(你的函数)即可。

这时我们能控制的地方有两个：跳转发生时React-Transition-Group提供的延时和enter、exit类名，和之前注册的listen函数。

本文提供的左右滑动思路为：判断跳转action，如果是push，则一律为当前页面左滑离开屏幕，新页面从右到左进入屏幕，如果是replace则一律为当前页面右滑，新页面自左向右进入。如果是pop则要判断是用户点击浏览器前进按钮还是返回按钮，还是调用了history.pop。

由于无论用户点击浏览器的前进按钮或是后退按钮，在history.listen中获得的action都