在使用react搭配react-router做应用的时候，你可能遇到这样的问题，当我从第一个页面过渡到第二个页面，然后返回之后，发现之前的页面的状态全部不见了，即回到了初始的状态。

这点在页面存在多个TAB页或者多条件筛选的时候体验会更加明显，这时候我又不得不点击我之前选择的页签，重新选择筛选条件，然后再进行搜索。因此，在这种情况下，保存之前的状态显得尤为亟待解决，下面是自己实践出来的几种方法，做一下分享，同时希望和各位一起探讨，看能不能有什么更好的办法。

代码：github

  1. // normal/routers/Books/Books.js
  2. module.exports = {
  3.     path: 'books',
  4.     getComponent(nextState, cb) {
  5.         require.ensure([], (require) => {
  6.             cb(null, require('./components/Books'))
  7.         })
  8.     },
  9.     getChildRoutes(partialNextState, cb) {
  10.         require.ensure([], (require) => {
  11.             cb(null, [
  12.                 require('./book')
  13.             ])    
  14.         })
  15.     }
  16. };
  18. // normal/routers/Books/book.js
  19. module.exports = {
  20.     path: 'book/:id',
  21.     getComponent(nextState, cb) {
  22.         require.ensure([], (require) => {
  23.             cb(null, require('./components/Book'))
  24.         })
  25.     }
  26. };

配置图书列表下的嵌套路由可以查看图书详情。具体的路由跳转如下：

  1. // normal/routers/Books/components/Books.js
  3. onLookDetail(id, book, index) {
  4.     this.setState({ activeIndex: index });
  5.     this.props.router.push({ pathname: `books/book/${id}`, query: book });
  6. }
  8. render() {
  9.     const { children } = this.props;
  10.     // ...
  11.     
  12.     // 如果有字路由组件，就渲染子组件
  13.     if (children) {
  14.         return children;
  15.     }
  16.     // ...
  17. }

效果如下：

child-router

可以看到，当从详情页面返回时，点击的激活状态依旧可以保存，但是列表滚动的高度并不能够保存，关于高度的恢复在下面会讲到。

不占用路由，在当前页面直接已弹窗的形式加载详情页面。

  1. // normal/routers/Books/components/Books.js
  2. constructor(props) {
  3.     super(props);
  4.     this.state = {
  5.         activeIndex: -1,
  6.         books: [],
  7.         modal: false
  8.     };
  9. }
  11. onLookDetail(id, book, index) {
  12.     this.setState({ activeIndex: index, modal: true });
  13. }
  15. onDetailBack() {
  16.     this.setState({ modal: false });
  17. }
  19. render() {
  20.     {
  21.       // 根据state中的modal值来判断当前弹窗是否显示
  22.       // 其实就是Book.js中的代码
  23.       modal && (
  24.         <div style={ styles.modal }>
  25.             <Flex direction="column" style={ styles.wrapper }>
  26.                 <div style={ styles.header }>
  27.                     <NavBar 
  28.                         mode="dark"
  29.                         leftContent="返回"
  30.                         icon={<Icon type="left" />}
  31.                         onLeftClick={ this.onDetailBack.bind(this) }>
  32.                         图书详情
  33.                     </NavBar>
  34.                 </div>
  35.                 <div style={ styles.content }>
  36.                     <Card>
  37.                         <Card.Header
  38.                             title="标题"
  39.                             thumb="xxx"
  40.                             extra={ <span>{ book.title }</span> }/>
  41.                         <Card.Body>
  42.                             <div>{ book.description }</div>
  43.                         </Card.Body>
  44.                         <Card.Footer 
  45.                             content="footer content" 
  46.                             extra={<div>{ book.price }</div>} />
  47.                     </Card>
  48.                 </div>
  49.             </Flex>
  50.         </div>
  51.         )
  52.     }
  53. }

效果如下：

modal

看上去效果十分好，既能保存状态，也能保存滚动条的高度。

我把这三种方案归结为一种，因为实际上是在离开列表组件的时候保存当前的状态，然后在回到页面的时候根据之前保存的状态来进行现场恢复而已。

  1. // src/routers/Books/components/Books.js
  3. // 配合shouldComponentUpdate声明周期函数，避免不必要的渲染
  4. shouldComponentUpdate(nextProps, nextState) {
  5.     return !is(fromJS(this.props.books), fromJS(nextProps.books))
  6.         || !is(fromJS(this.state), fromJS(nextState));
  7. }
  9. // 更新当前选中的activeIndex值，将其同步至redux中，然后再进行路由跳转
  10. onLookDetail(id, book, index) {
  11.     const { actions } = this.props;
  12.     actions.updateBooks({ activeIndex: index });
  13.     this.props.router.push({ pathname: `book/${id}`, query: book });
  14. }
  16. // 从redux中取值进行现场恢复
  17. render() {
  18.     const { books } = this.props;
  19.     const list = books.books;
  20.     const activeIndex = books.activeIndex;
  21.     
  22.     // ...
  23. }
  25. // src/reudx/reudcers/books.js
  26. const initialState = {
  27.     books: [],
  28.     activeIndex: -1
  29. };

效果如下：

redux

效果和字路由方式相同，依然存在滚动高度不能保存的问题。

下面来谈谈如何解决滚动高度的问题，综合起来还是一种恢复现场的方式。在页面即将离开之前，保存之前的scrollTop值，然后再次回到这个页面的时候，恢复滚动高度即可。

  1. // src/reudx/reudcers/books.js
  2. const initialState = {
  3.     books: [],
  4.     activeIndex: -1,
  5.     // 添加scrollTop
  6.     scrollTop: 0
  7. };
  9. // src/routers/Books/components/Books.js
  10. componentDidMount() {
  11.     const { actions, books } = this.props;
  12.     const content = this.refs.content;
  13.     const scrollTop = books.scrollTop;
  14.   
  15.     if (scrollTop > 0) {
  16.         content.scrollTo(0, scrollTop);
  17.     }
  18.   
  19.     setTimeout(() => {
  20.         actions.getBooks();
  21.     }, 150);
  22. }
  24. componentWillUnmount() {
  25.     const content = this.refs.content;
  26.     const { actions } = this.props;
  27.     actions.updateBooks({ scrollTop: content.scrollTop });
  28. }

效果如下：

scrollTop

在github上搜索看到了这个库，类似于react-router的一个翻版，同时在react-router的基础上增加了类似于vue-router中的keep-alive功能，这点暂时占坑，等做了案例之后再来填坑。

版权声明：本文为rynxiao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/rynxiao/p/8305017.html