Смена монолитных компонентов react-router-dom

Всем привет. Есть проблема. У меня есть рабочее приложение которое состоит из 3х сущностей. Header, NavigationBar, и рабочая область, которая меняется в зависимости от роута

<div className="wrapper">
   <NavigationBar />
   <Header />
   <section className="content">
    <Routes />
   </section>
 </div>

Так выглядит компонент Routes

<Switch>
    <Route exact path="/signin" component={Auth} />
    <Route path="/signup" component={Register} />
    <Route exact path="/me" component={User} />
    <Route exact path="/settings" component={Settings} />

    <Route exact path="/dashboard/team" component={TeamList} />
    <Route path="/dashboard/team/:teamID" component={Team} />

    <Route exact path={['/dashboard', '/']} component={Dashboard} />
    <Route component={NotFound} />
  </Switch>

Дело в том, что при рендере таких компонентов как signin / signup мне не надо показывать Header + NavigationBar - как их разделить так, чтобы не хардкодить в каждой компоненте header && navigationBar ?

Нашел вот такое решение для монолитных компонентов, но мне кажется есть более лаконичное решение.

const Header = () => {
  const location = useLocation()
  if(location === '/auth') return null
}