How do i render the drawer from material UI with routing only on certain routes? (reactjs)(materialui)

2
votes

I have a material-UI drawer in my react project, the problem is that the drawer component has the page content in the component itself. I solved a previous problem which was having routes with react-router-dom with the drawer. What I'm wondering how to do is I only want the drawer to show on certain routes, not all.

I've tried to make some if statements in the drawer component but couldn't find one that worked.

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>
  );
};

Small part of NavBar.js (drawer) which is where the content is shown

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

*ReactRouter = routes.js

I want this NavBar.js only to show on /search and /mask but not on '/', '/home' or '/login'

1
javascriptreactjsmaterial-uireact-router-domdrawer

1 Answers

0
votes

Instead of passing the Component prop to Route, add the component as a child. This way, you can add the NavBar to the routes you want like this:

(Sorry for formatting, am on mobile)

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