react缓存页面内容 插件react-router-cache-route

缓存页面内容,跳到下一页再次返回,滚动,点击active都保持和离开时候的状态一致

npm install react-router-cache-route --save

示例代码:

import React from "react";
import ReactDom from "react-dom";
import { HashRouter, Route, hashHistory, Redirect } from "react-router-dom";
import {CacheSwitch, CacheRoute} from 'react-cache-router';
class App extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return ( 
                <HashRouter history={hashHistory}>
                    <CacheSwitch>
                        <CacheRoute path="/a" component={sourceIndex}></CacheRoute>
                        <Route path="/b" component={sourceSearch}></Route>
                        <Redirect to="/"></Redirect>
                    </CacheSwitch>
                </HashRouter>
        )
    }
}
ReactDom.render(<App />, document.getElementById("root"));

注意:
缓存语句要写在CacheSwitch里面

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容