如何使用 Material-Ui-Next Mini variant Drawer 正确布局主要内容

Question

我正在尝试使用 material-ui-next 的迷你变体抽屉来构建我的布局。我希望我的组件 - 主页、登录、注册等在抽屉的 <main className={classes.content}> 中呈现。什么是正确的方法？我应该在 Drawer 组件中导入 Home、Login、Register 和 Router 吗？或者，还有更好的方法？

相关图片：

Answer 1

我们传递给 react-router 的 Route 组件的 Component 在匹配时呈现。 <Switch> 呈现匹配的第一个 child <Route>。所以有两种方法可以在 MiniDrawer 的 <main> 下渲染这些组件：

1- 把你的<Switch><Route>...</Switch>写成 children of MiniDrawer in your App.js, like

<MiniDrawer>
    <Switch>
      <Route>...
       ...
    </Switch>
</MiniDrawer>

和

在 MiniDrawer.js 中：

<main className={classes.content}>
    {this.props.children}
 </main>

2- 或你可以写你的 <Switch><Route>...</Switch> 里面 <main> 在 MiniDrawer

如何使用 Material-Ui-Next Mini variant Drawer 正确布局主要内容

how to properly layout main contents with Material-Ui-Next Mini variant Drawer

reactjs

material-ui

react-router-v4