Question

我需要在一条路线中显示不同的组件。

我的授权路由器如下：

<Route authorize={['admin']} component={Authorization}>
    <Route path='/home' component={Home} />
</Route>

在Authorization组件中，我必须检查用户是否可以访问此路由。但问题是如何在同一条路线上显示不同的组件？

这样的事情不起作用：

<Route authorize={['admin']} component={Authorization}>
    <Route path='/home' component={AdminHome} />
</Route>
<Route authorize={['manager']} component={Authorization}>
    <Route path='/home' component={MangerHome} />
</Route>

Answer 1

只定义一个路径并创建一个包装器组件，在包装器组件中检查条件并呈现不同的组件。

像这样：

<Route authorize={['manager', 'admin']} component={Authorization}>
    <Route path='/home' component={WrapperComponent} />
</Route>

现在从Authorization组件传递一些bool到WrapperComponent，以决定要渲染哪个组件。

内部WrapperComponent：

render(){
   if(this.props.isAdmin)
      return <Home  />
   return < MangerHome />
}

如何在一条路线上为不同用户显示不同的组件？

1 个答案: