如何使用 Material-Ui-Next Mini 变体抽屉正确布局主要内容

【问题标题】：how to properly layout main contents with Material-Ui-Next Mini variant Drawer如何使用 Material-Ui-Next Mini 变体抽屉正确布局主要内容
【发布时间】：2018-04-02 17:24:22
【问题描述】：

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

相关图片：

【问题讨论】：

标签： reactjs material-ui react-router-v4

【解决方案1】：

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

1- 将您的 <Switch><Route>...</Switch> 作为 MiniDrawer 的孩子写在您的 App.js 中，例如

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

和

在MiniDrawer.js：

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

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

【讨论】：