React-route使用时如何在页面切换时保持数据不变？

Question

var List = React.createClass({ 
    getInitialState: function(){
        return {
            list: ['123']
        };
    },
    handleChange: function (items) {
        this.setState({
            list: items
        });
    },
    render: function() {
        return (
            <div>
                <AddNew list={this.state.list} onAdd={this.handleChange} />
                <Items list={this.state.list} onDel={this.handleChange} />
            </div>
        )
    }
})

//路由配置
<Router history={browserHistory}>
    <Route path="/" component={TodoList} >
        <IndexRoute component={List} />
        <Route path='/content/:id' component={Content} ></Route>
    </Route>
</Router>

这是一个todolist的demo,路由是在列表组件List和详情页Content之间切换。当我在list页面添加几条事项后切换到content页面，然后再切换回来的时候发现之前新增的事项都不见了。我觉得应该是每次切换到List组件都会触发getInitialState导致list数组被清空。请问有什么解决的方法吗？或者是我存放数据的方式不对？

Answer 1

提供几种思路：

1. 存储在 redux 中。

2. 存储在最外层 component 的 context 中，也可以使用基于此的框架 mobx。

Answer 2

考虑用react redux来储存数据