在 react.js 中导航答案

【问题标题】：Navigating in react.js在 react.js 中导航
【发布时间】：2015-02-21 20:28:25
【问题描述】：

在我的 react.js (Fluxxor) 应用程序中，我必须在不同的表单之间导航。例如：只要用户未通过身份验证，就会显示登录组件。一旦用户登录登录组件消失，应显示条目列表组件（或其他内容）。从那里我可以打开条目详细信息组件（这意味着条目列表组件应该被隐藏）。

最好的方法是什么？

我尝试过的：

更换组件（卸载应该隐藏的组件，安装应该显示的组件）
在 DOM 中有多个组件。（但看起来这是不允许/可能的）
拥有一个包含所有子组件（登录、列表、详细信息）的根组件，并让它们的存储类决定该组件是否可见）

谢谢

【问题讨论】：

标签： reactjs flux

【解决方案1】：

我偏爱第三种方法，即让一个组件通过呈现不同的组件来管理应用程序的“状态”。然后控制器视图负责注册子组件并在必要时与商店/服务交互。我通常使用react router 并为我的每个控制器视图设置顶级路由。

以下伪代码表示结构：

<Router>
  <ControllerView>
   <SubComponent>
   <AnotherSubComponent>
  </ControllerView>

  <AnotherControllerView>
   <SubComponent>
   <AnotherSubComponent>
  </AnotherControllerView>
</Router>

【讨论】：