如何在反应路由器转换中保持状态

Question

我已经设置了相当典型的 react-router 应用程序：

var App = React.createClass({
    render: function() {
        return ( < RouteHandler /> );
    }
});

var routes = (
    <Route handler = { App }>
        < Route name = "Todo" path = "todo/:id" handler = {Todo}/>
        < DefaultRoute name = "Todos" handler = {Todos}/>
    </Route>
);

Router.run(routes, function(Handler) {
    React.render( < Handler /> , document.getElementById('content'));
});

我的问题是我的 Todos 组件上有一些搜索过滤器，我想在转换到特定 Todo 并返回时保留这些过滤器。显而易见的解决方案是将这些过滤器值保存在 App 的状态中，但我想不出一种优雅的方法来允许 Todos 访问 App 的状态。

有什么提示吗？

附录：此应用使用 Reflux 以及 react-router。

Answer 1

您可以使用 Reflux 之类的方法来管理整个应用程序的状态。它将充当您的中央商店和中央命令库（操作）

var Reflux = require('reflux');

var actions = Reflux.createActions(
  ["getAction", "saveAction"]
);

var DataStore = Reflux.createStore({
  data: data,
  listenables: [actions],
  init: function() {
    this.trigger(this.data);
  },
  onGetAction: function() {
    // some ajax if you like
  },
  onSaveAction: function() {
    // more ajax
  },
  getInitialState: function() {
    return this.data;
  }
});

var App = React.createClass({
  mixins: [Reflux.connect(DataStore, 'datastore')],
  render: function () {
    var d = this.state.datastore;
    return (
    ...

Answer 2

我会 url 保存列表的状态过滤器和页码。

反应路由器之一 "Benefits of this Approach" 是： URL 是您的第一个想法，而不是事后的想法。

url 是网络的基础部分，充分利用它，不要试图回避它。

通过在 url 中保存过滤状态，您可以免费获得后退按钮支持，并允许您的用户将该过滤状态保留为书签或 link。

Answer 3

您可以使用子项或渲染而不是组件，以便在导航到另一个组件后隐藏而不是卸载组件。请记住，卸载组件是 React 和 React-router 中做事的标准方式，因为它使 DOM 更小，因此更快。例如：

    <Route path={/some-path} children={({ match }) => {
              return (
    <div style={{ display: match ? 'block' : 'none' }}>
        <YourComponentHere/>
    </div>
        )
      }}
    />

如何在反应路由器转换中保持状态

How to persist state across react router transitions

reactjs

react-router