在reactjs中使用具有相同路径路径的条件组件

Question

假设我有两个被调用的组件<Dashboard/>正在用户登录后呈现,并且<Landing/>当用户尚未登录时正在呈现.在reactjs中,如果我想使用相同的/路径,如果用户未登录,该怎么办？然而它会渲染<Landing/>,<Dashboard/>如果用户登录它将呈现？

<Landing/> 是

<Route path="/" component={Landing} onEnter={appOnEnter}>
  <IndexRoute component={Home}/>

  ... Other not-login-required routes ...
</Route>

并且Dashboard是

<Route path="/" component={Dashboard} onEnter={appOnEnter}>
  <IndexRoute component={Home} />

  ... Other login-required routes ...
</Route>

我来到getComponent/getComponents,我想我可以使用

<Route path="/" getComponent={(nextState, cb) => {
 // do asynchronous stuff to find the components
 cb(null, Course)
}} />

但是,这似乎并没有使用该方法建议

我们没有明确支持这种模式的原因是因为用这种方式连接起来是相当不典型的

那么实现我想要的最好方法是什么？

Answer 1

您可以Home为该路线制作组件,并且

return this.props.loggedIn ? <Dashboard /> : <Login />;

这样您就不必在路线级别处理它.