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

Question

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

相关图片:

Answer 1

Component我们输入react-router的Route组件在匹配时渲染。一个<Switch>渲染第一个子项 <Route>匹配。因此，您可以通过两种方式在<main>下渲染这些组件。迷你抽屉:

1-写下你的<Switch><Route>...</Switch>作为您的 App.js 中 MiniDrawer 的子级，就像

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

和

在 MiniDrawer.js :

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

2- 或者你可以写下你的 <Switch><Route>...</Switch>里面<main>在迷你抽屉中