如何仅在某些路线上通过路由从材质 UI 渲染抽屉？ (reactjs)(materialui)答案

【问题标题】：How do i render the drawer from material UI with routing only on certain routes? (reactjs)(materialui)如何仅在某些路线上通过路由从材质 UI 渲染抽屉？ (reactjs)(materialui)
【发布时间】：2019-09-16 21:00:34
【问题描述】：

我的 react 项目中有一个 material-UI 抽屉，问题是抽屉组件在组件本身中有页面内容。我解决了以前的问题，即在抽屉中使用 react-router-dom 路由。我想知道该怎么做是我只希望抽屉在某些路线上显示，而不是全部。

我尝试在抽屉组件中创建一些 if 语句，但找不到有效的语句。

Routes.js

const Routes = () => {
  return (
    <Fragment>
      <Switch>
        <Route exact path='/' component={Landing} />
        <Route path='/home' component={Index} />
        <Route path='/login' component={Login} />
        <Route path='/search' component={Search} />
        <Route path='/mask' component={Mask} />
        <Route component={NoMatch} />
      </Switch>
    </Fragment>
  );
};

App.js

const App = () => {
  return (
    <Provider store={store}>
      <NavBar></NavBar>
    </Provider>
  );
};

NavBar.js（抽屉）的一小部分，是显示内容的地方

      <main className={classes.content}>
        <div className={classes.toolbar} />
        <ReactRouter></ReactRouter>
      </main>

*ReactRouter = routes.js

我希望此 NavBar.js 仅显示在 /search 和 /mask 上，而不显示在 '/'、'/home' 或 '/login' 上

【问题讨论】：

标签： javascript reactjs material-ui react-router-dom drawer

【解决方案1】：

不要将 Component 属性传递给 Route，而是将组件添加为子组件。这样，您可以像这样将NavBar 添加到您想要的路线中：

（抱歉格式化，我在手机上）

<Route path='/mask'> <NavBar /> <Mask /> </Route>

【讨论】：

我实际上尝试过，但由于 Mask 组件位于 NavBar“内部”，如上所示的 NavBar.js，这似乎不起作用
然后将它移到 NavBar 之外....现在您正在制作 NavBar 的所有子页面。这并不是构建网站的好方法。
我也是这么认为的，但这似乎是material-ui.com 做他们的抽屉组件的方式
是的，但这只有在您的抽屉将存在于所有页面上时才合乎逻辑。如果您不希望抽屉出现，则不应该渲染它，这意味着它不应该是父级。
将您的路线移动到App 并使您的导航组件成为您要显示的组件的子组件。否则，您将需要重新考虑您的设计。