Question

我正在尝试显示标题，侧边栏和组件。标题和侧边栏应始终显示。第三个组件将根据边栏上单击的项目进行渲染。

对于侧边栏，我使用的是material-ui @ 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>
   )
 }

Header将始终呈现，因此您实际上不需要将其包装在Route中。
Drawer需要一些道具来声明它的状态，所以如果你在Sidebar中展示你传递给它的内容会更好。我的猜测是你试图制作permanent drawer，这要求你使用上面的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>

在侧边栏组件

2 个答案: