如何跨react-router转换保持状态

IT技术 reactjs react-router
2021-05-07 03:06:20

我已经设置了相当典型的 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。

3个回答

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

react-router之一“这种方法的好处”是： URL 是您的第一个想法，而不是事后的想法。

url 是网络的基础部分，使用它对你有利，不要试图避免它。

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

您可以通过使用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 (
    ...

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

    <Route path={/some-path} children={({ match }) => {
              return (
    <div style={{ display: match ? 'block' : 'none' }}>
        <YourComponentHere/>
    </div>
        )
      }}
    />
其它你可能感兴趣的问题
上一篇磨料丝是否需要特殊的热端？ 下一篇打印机已停止挤出