اخفاء مكونات في صفحات معينة react router

لدي قمت بتجهيز مكون app ليعمل بهذه الطريقة

import React, { useState, useEffect } from 'react';
import { Switch, Route, Link, HashRouter } from 'react-router-dom';


import routes from './routes/userRoutes';
import Navbar from './pages/layout/Navbar';
import Footer from './pages/layout/Footer';

export default function App() {
  console.log(routes);
  return (
    <HashRouter>
      <Navbar></Navbar>
      <Switch>
        {routes.map((route) => (
          <Route {...route}></Route>
        ))}
      </Switch>
      <Footer></Footer>
    </HashRouter>
  );
}

و لدي مشكلة حيث انه اعلم انه في المستقبل سانشئ صفحات لا تحتوي على navabar و footer وأتساءل عن الطريقة الصحيحة للوصول لذلك من الأن ليكون كل شئ منظم من البداية