} else { //没有数据就去请求数据源
this.props.loadData(); // 在redux中定义的数据请求的action
}
}
handleClik = () => {
在点击进入下一级页面前先保存当前的滚动距离
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const {saveScrollTop} = this.props;
saveScrollTop(scrollTop);
}
首先我们可以在redux中为页面定义异步的action，将请求回来的数据放入集中的store中(redux的该相关具体用法不在细述)。在sotre里我们可以保存当前页面的数据源、滚动条高度以及其他一些可能要用到的分页数据等来帮助我们恢复状态。
在componentDidMount生命周期里，首先根据redux里store中的对应的字段，判断是否已经加载过数据源。如果已经缓存过数据则不再去请求数据源，只去恢复一下store里的存储过的一些滚动条位置信息等。如果还未请求过数据，就使用在redux中定义的异步action去请求数据，在将数据在reducer里将数据存到store中。 在render函数里，我们只需要读取redux里存储的数据即可。
为了保留要缓存页面的一些状态信息，如滚动条、分页、操作状态，我们可以在进行对应操作时候将这些信息存入redux的store中，这样当我们恢复页面时，就可以将这些对应状态一一读取并还原。
2. 使用display的属性来切换显示隐藏路由组件
想要display的属性来切换显示隐藏路由组件，首先要保证路由组件不会在url变化时候被卸载。在react-router中最使用的Route组件，它可以通过我们定义的path属性来与页面路径来进行匹配，并渲染对应的组件，从而达到保持UI与URL同步变化的效果。
首先简要看下Route组件的实现 GitHub Route.js
return (
<RouterContext.Provider value={props}>
{children && !isEmptyChildren(children)
? children
: props.match // props.match 属性来确定是否要渲染组件
? component
? React.createElement(component, props)
: render
? render(props)
: null
: null}
</RouterContext.Provider>
);
上述代码出现在关键的render方法最后的return中
Route组件会根据props对象中的match属性来确定是否要渲染组件，如果match匹配到了就使用Route组件上传递的component或者render属性来渲染对应组件，否则就返回null。
然后溯源而上，我们找到了props对象中关于match的定义：
const location = this.props.location || context.location;
const match = this.props.computedMatch
? this.props.computedMatch // <Switch> already computed the match for us
: this.props.path
? matchPath(location.pathname, this.props)
