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

Question

假设我有 2 个名为 <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)
}} />

但是this似乎不建议使用该方法

The reason we don't explicitly support this sort of pattern is because it's fairly atypical to wire things up this way

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

Answer 1

您可以为该路由创建一个Home 组件，并且

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

这样您就不必在路由级别处理它。