react-router 中保持页面状态

最近工作中用 react + react-router 实现了一个类似今日头条的 demo。然后今天一个同事过来告诉我，能不能点击列表页进入详情页后，然后点击返回能够保持住之前列表页的状态。现在是返回后列表页又会重新加载。如果之前加载了很多页数据的话，现在又得重新加载了。易用性很差。下面附上我的解决方案，如果各位有更好的，欢迎提出来。

我想的第一个解决方案是把新闻详情页通过 css 隐藏在列表页，然后点击列表中的一项时，加载数据，然后显示出来详情页，然后点击返回时，再把详情页隐藏。这个思路肯定是可行的。但是我需要改动不少的 code。我就放弃了（实际上我尝试了一下，改的最终效果不好）。

然后我又想到另一个方法，就是通过 html5 的 sessionStorage 来维持列表页的状态，附一下核心部分的代码。

componentWillUnmount() {
    console.log('待保存的数据：', this.state.newslist);
    console.log('保存滚动条位置：', document.body.scrollTop);
    let data = {
        newslist: this.state.newslist,
        scrollpx: document.body.scrollTop,
        page: this.state.page
    }
    window.sessionStorage.setItem('tmpdata', JSON.stringify(data));
}

在列表页这个 component 即将被 unmount 时，通过 window.sessionStorage.setItem 将当前列表页的数据存储起来。

try_restore_component() {
    let data = window.sessionStorage.getItem("tmpdata");
    if (data) {
        data = JSON.parse(data);
        this.state = {
            newslist: data.newslist,
            page: data.page,
            scrollpx: data.scrollpx
        }
    } 
}

然后写一个 restore data 的方法，在 class 的构造函数中执行一下这个方法判断一下，如果拿到了之前存储的 sessionStorage，那么就给 state 一个初始赋值。

总结：总的思路就是打开列表组件的时候，先去执行一个 restore 方法，判断 sessionStorage 中有没有数据，有的话就带上，没有的话就该干嘛干嘛。然后列表组件被卸载的时候，存储当前的列表数据到 sessionStroage 中，便于以后使用。

转载于:https://my.oschina.net/u/3117745/blog/920150