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

IT技术 reactjs react-router
2021-05-20 18:54:01

假设我有 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)
}} />

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

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

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

3个回答

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

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

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

即使有效,@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>
  )
}

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

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

在 react 路由器中,您可以使用render()返回组件,这样可以方便地进行内联渲染和包装,而无需进行不需要的重新安装。

由于它是一个函数,因此您可以进行条件检查以确定应该渲染哪个组件并返回该组件。

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

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

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