在 reactjs 中使用具有相同路由路径的条件组件 [英] using conditional component with the same route path in reactjs

问题描述

假设我有两个名为 的组件，它们在用户登录后呈现，而 正在呈现时用户尚未登录在 reactjs 中，如果我想使用相同的 / 路由，如果用户尚未登录，它将呈现 <Landing/> 和它，我该怎么办是否会在用户登录时呈现 ?

Say i have 2 components called <Dashboard/> that is being rendered after a user logged in and <Landing/> that is being rendered when user is not logged in yet In reactjs, what should i do if i want to use the same / route that if the user is not logged in yet it will render <Landing/> and it will render <Dashboard/> if the user is logged in?

是

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

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

和仪表板是

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

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

我遇到了getComponent/getComponents 我想我可以像这样使用

i came accross getComponent/getComponents which i think i can use like

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

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

But this doesn't seem to suggest using that method

我们不明确支持这种模式的原因是，以这种方式进行连接是相当不典型的

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

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

So what would be the best way to achieve what i want?

推荐答案

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

You can make a Home component for that route, and

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

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

That way you don't have to deal with it at the route level.

这篇关于在 reactjs 中使用具有相同路由路径的条件组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！