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

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 requires some props to declare it state so it would be nice if you show what you passed to it in Sidebar. My guess is that you try to make 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>

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

Displaying React component next to a sidebar component

reactjs

react-router

material-ui

react-router-v4