React-Router具有多个具有不同父组件的入口点

Question

我正在尝试使用2个独立的父组件，它将根据User和Admin呈现不同的布局。由于两个部分将具有不同的布局，这意味着例如NavigationBar中的User将与Admin不同。我被困住了，不知道如何继续这样做。

我正在为我的项目使用this样板。

目前我的代码是这样的

return (
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="about" component={About}/>
    <Route path="survey" component={Survey}/>
    <Route path="widgets" component={Widgets}/>
  </Route>
);

但是，我无法为/admin路径设置单独的设计。

更新

我能够通过将管理部分包含在路由中并将用户包含在另一个路由标记中来解决我的问题。两者都是我的App组件的子代。

return (
  <Route component={App}>
    <Route path="/admin" component={Admin}>
      <IndexRoute component={Login}/>
      <Route path="dashboard" component={Dashboard}/>
    </Route>
    <Route component={User}>
      <IndexRoute component={Home}/>
      <Route path="*" component={NotFound} status={404} />
    </Route>
  </Route>
);