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

【问题标题】：using conditional component with the same route path in reactjs在reactjs中使用具有相同路由路径的条件组件
【发布时间】：2017-02-26 20:56:48
【问题描述】：

假设我有两个名为 <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 似乎不建议使用该方法

我们不明确支持这种模式的原因是因为以这种方式连接事物是相当不典型的

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

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

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

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

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

【讨论】：

这解决了我的问题（赞成）。但是我们有什么办法可以在路线级别实现这一目标？

【解决方案2】：

即使有效，@Andy_D 发布的答案实际上并不符合我的用例，所以我最终这样做了

...

/** 
 * Layouts 
 * 
 * i separate the main layout into two parts
 * - Guest, base layout used to any page or route for guests
 * - Member, base layout used to any page or route for members
*/
import Guest from './Layouts/Guest'
import Member from './Layouts/Member'

...

const Routesz = (store, actions) => {
  const GuestRoute = () => (
    <Route path="/">
      <Route component={Guest.components.Layout}>
        <Route
          path="/signin"
          component={SigninComponent}
        />
        <Route
          path="/signup"
          component={SignupComponent}
        />
      </Route>
    </Route>
  )

  const MemberRoute = () => (
    <Route path="/">
      <Route component={Member.components.Layout}>
        <IndexRoute component={DashboardComponent}/>

        <Route path="post" component={SomeParentComponent} name="Service">
          <IndexRoute
            component={SomeChildComponent_1}
          />
          <Route
            path="add"
            component={SomeChildComponent_2}
          />
          <Route
            path=":id/edit"
            component={SomeChildComponent_3}
          />
          <Route
            path=":id/remove"
            component={SomeChildComponent_4}
          />
        </Route>
      </Route>
    </Route>
    )

  const MainRoutes = () => (
    isAuthorized()
      ? MemberRoute(actions)
      : GuestRoute(actions)
  )

  return MainRoutes(actions)
}

export default (store) => {
  return (
    <Route>
      {Routesz(store, actions)}
      ...
    </Route>
  )
}

目前这对我来说足够灵活，可以为不同的页面使用不同的布局

【讨论】：

【解决方案3】：

这可能对寻找答案的人有所帮助。

在 react 路由器中，您可以使用 render() 返回组件，该组件允许方便的内联渲染和包装，而无需重新安装。

因为它是一个函数，你可以做一个条件检查来决定哪个组件应该得到渲染并返回那个组件。

最好的部分是您可以在不创建新组件的情况下内联执行此操作。

ReactDOM.render(
    <Router>
        <Route path="/home" render={() => {
             return isDashBoard ? <Dashboard /> : <Landing />
        } />
    </Router>,
   node
);

基本上是简单的内联 JSX 来确定要返回的组件。

【讨论】：

谢谢。这很有用。