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

Question

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

相关图片:

Answer 1

在Component我们进入react-router的Route组件被渲染上比赛.A <Switch>呈现<Route>匹配的第一个孩子.因此,有两种方法可以在<main>MiniDrawer 下呈现这些组件:

1-写下你<Switch><Route>...</Switch>的MiniDrawer的孩子App.js,就像你一样

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

和

在MiniDrawer.js:

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

2- 或者您可以在MiniDrawer中编写 <Switch><Route>...</Switch>内部<main>