React router dom V6 hiding components/elements

Question

I have a landing page with more than five different components/elements how can I hide certain elements and keep for instance only Navbar "TermsAndConditions page" and footer.

import { useState, useEffect } from "react";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import AboutUs from "./components/AboutUs";
import BACSection from "./components/BACSection";
import Footer from "./components/Footer";
import Hero from "./components/Hero";
import Navbar from "./components/Navbar";
import SectionDivider from "./components/SectionDivider";
import SingleDivider from "./components/SingleDivider";
import Clints from "./components/Clints";
import HowToOrder from "./components/HowToOrder";
import TermsAndConditions from "./components/TermsAndConditions";


function App() {
  const [lang, setLang] = useState("En");
  useEffect(() => {
    let lang = window.localStorage.getItem("lang");
    setLang(lang || "En");
  }, []);

  return (
    <Router>
      <Navbar lang={lang} setLang={setLang} />
      <Hero lang={lang} />
      <HowToOrder lang={lang} />
      <SectionDivider />
      <AboutUs lang={lang} />
      <SingleDivider />
      <Clints lang={lang} />
      <BACSection lang={lang} />
      <SingleDivider />
      <Routes>
      <Route path="/terms" element={<TermsAndConditions lang={lang} />} />
      </Routes>
      <Footer lang={lang} />
    </Router>
  );
}

export default App;

For example if I just want to have those three components

  return (
<Router>
  <Navbar lang={lang} setLang={setLang} />
  <Routes>
  <Route path="/terms" element={<TermsAndConditions lang={lang} />} />
  </Routes>
  <Footer lang={lang} />
</Router>