React-router 转换总是创建处理程序

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 组件，是最简单的设置。当应用程序启动时，我按预期登陆“公司”页面。然后，当我过渡到“员工”时，一切都很好，但是当我过渡回“公司”时，我观察到创建了一个全新的 {Company} 组件，从而使我的状态消失了。这将导致许多不必要的 API 调用，除非我做错了什么或不理解。

有没有办法告诉 Route 使用现有的处理程序（如果存在）并重新渲染它？而不是创建一个新类？

Answer 1

将状态保存在通量存储中

您的一个解决方案是将状态保存在通量存储中。组件挂载后，通过getInitialState()函数向store请求数据。

将状态保存在父组件中

如果您不想使用通量存储（因为它会增加简单示例的复杂性），我建议将状态保留在父组件中，并将其作为道具传递给您。

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

我建议您查看 this tutorial，了解如何将 props 传递给子组件。

This 教程介绍了如何从孩子与父母沟通。