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

Question

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

相关图片：

Answer 1

我们传入Component的{​​{1}}组件的react-router会在匹配时呈现。 Route呈现匹配的第一个子<Switch>。因此，有两种方法可以在MiniDrawer的<Route>下呈现这些组件：

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

App.js

和

<MiniDrawer> <Switch> <Route>... ... </Switch> </MiniDrawer> 中的

：

MiniDrawer.js

2- 或你可以写你的 MiniDrawer中<main className={classes.content}> {this.props.children} </main> 内的<Switch><Route>...</Switch>