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

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

反应路由器之一＆＃34;此方法的好处＆＃34;是： 网址是您的第一个想法，而不是经过深思熟虑的。

网址是网络的基础部分，利用它可以避免它。

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

Answer 2

您可以通过使用Reflux之类的内容来管理整个应用程序中的状态。它将充当您的中央存储和中央命令库（操作）

html{
     overflow: scroll;
}

Answer 3

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

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

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

3 个答案: