如何通过仅在某些工艺路线上提供工艺路线的物料UI来渲染抽屉？(反应)(Materialui)

Question

我在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>

*反应路由器= routes.js

我希望这个登录只在/search和/mask上显示，而不是在'/'，‘/ NavBar.js’或‘//mask’上显示

Answer 1

将组件作为子组件添加，而不是将Component属性传递给Route。这样，您可以将NavBar添加到所需的路由，如下所示：

(很抱歉格式化，我在手机上)

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