时间戳

首页 > 解决方案 > 如何仅在某些路线上通过路由从材质 UI 渲染抽屉？(reactjs)(materialui)

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

问题描述

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

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

路由.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>
  );
};

应用程序.js

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

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

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

*ReactRouter = 路由.js

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

标签： javascriptreactjsmaterial-uireact-router-domdrawer

解决方案

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

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

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

推荐阅读