反应路由器转换总是会创建处理程序

Question

我刚开始，所以我不知道这是期望的行为还是我错过了某些东西。我使用的是Flux架构（特别是Reflux，但这不应该是相关的）。在我的超级简单测试应用程序中：

var App = React.createClass({ 
    render: function() { 
     return (
      <div className="container"> 
       <Header /> 
       <RouteHandler /> 
      <div> 
     ); 
    } 
}); 

var routes = (
    <Route name="app" path="/" handler={App}> 
     <Route name="employees" handler={Employees}/> 
     <Route name="company" handler={Company}/> 
     <Route name="timesheets" handler={Timesheets}/> 
     <DefaultRoute handler={Company} /> 
    </Route> 
); 

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

处理程序是React组件，最简单的设置。当应用程序启动时，我按预期登录“公司”页面。然后，当我转换到“员工”时，一切都很好，但当我转换回“公司”时，我发现创建了一个全新的{公司}组件，因此吹掉了我的状态。这会导致很多不必要的API调用，除非我做错了或不理解。

有没有办法告诉路由使用现有的处理程序，如果存在，只是重新渲染它？而不是创建一个新班级？

Answer 1

保持通量存储中的状态

对您而言，一种解决方案是将状态保持在磁通存储中。当组件被安装时，请求getInitialState()功能中的商店数据。

保持在一个父组件的状态

如果你不想使用助焊剂店（因为它增加了你的简单例子的复杂性），我建议保持在一个父组件的状态，并通过它把你当作道具。

当然，这只有在父组件未卸载时才有效。我相信你的例子中的根组件<Handler />应该在你的例子中的状态转换之间保持安装。

我建议你看看this tutorial，它会回顾如何将道具传递给子组件。

This教程继续了解如何与孩子沟通。