在侧边栏组件旁边显示React组件

Question

我试图显示一个标题，侧边栏和一个组件。标题和侧栏应该始终显示。第三个组件将根据侧边栏上单击的项目呈现。

对于侧栏，我使用的是material@next <Drawer />组件。对于导航，我使用react-router-4，如下所示：

App.js

render() {
  return (
    <Router>
      <div>
        <Route component={Header} />
        <Route path="/dashboard" component={Sidebar} />
        <Route path="/dashboard/usernew" component={UserNew} />
      </div>
   </Router>
  )
}

我正在成功地呈现所需的组件。为了简单起见，请参阅以下代码：

Sidebar.js

...
<List component="nav">
  <ListItem
    button
    component={Link}
    to="/dashboard/usernew"
  >
      New User
  </ListItem>
</List>
...

问题是，所需的组件<UserNew />不是在侧边栏旁边呈现，而是在它下面呈现。附上一张图片，以更好地理解我的问题：

​

有人能指出正确的方向来显示<Sidebar />旁边的组件吗？

Answer 1

我不确定这会不会有帮助，但我会改变一些事情。

render() {
  return (
     <Router>
        <div>
          <Header />
          <Route path="/dashboard" render={props => (
            <Drawer
              variant="permanent"
              anchor="left"
            >
              <Route path="/dashboard/usernew" component={UserNew} />
            </Drawer>
          ))}
          />
        </div>
     </Router>
   )
 }

1. Header将始终呈现，因此实际上不需要将其包装在Route中。
2. 抽屉需要一些道具来声明它的状态，所以如果在Sidebar中显示传递给它的内容，那就太好了。我的猜测是，您试图制作永久抽屉，这要求您使用像上面这样的children道具。

Answer 2

我通过在<Sidebar />组件中放置子仪表板路由来解决这个问题。因此，代码如下所示：

App.js:

  render() {
    return (
      <Router>
        <div>
          <Route component={Header} />
          <Route path="/dashboard" component={Sidebar} />
        </div>
     </Router>

Sidebar.js

<div>
<Drawer>
<List component="nav">
  <ListItem
    button
    component={Link}
    to="/dashboard/usernew"
  >
      New User
  </ListItem>
</List>
</Drawer>
<div>
   <Route path="/dashboard/usernew" component={UserNew} />
</div>
</div>