You can create a layout route that renders the Header and Footer components, and an Outlet component for nested routes.

Outlet

An <Outlet> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

Example:

import { Outlet } from 'react-router-dom';

const PageLayout = () => (
  <>
    <Header />
    <Outlet /> // <-- nested routes render out here
    <Footer />
  </>
);

Render the PageLayout component on a route and wrap all but the error route.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route element={<PageLayout />}>
          <Route path="/" element={<Home popup={showVideoPopup} />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/faq" element={<Faq />} />
          <Route path="/privacy-policy" element={<PrivacyPolicy />} />
          <Route path="/disclaimer" element={<Disclaimer />} />
          <Route path="/terms-conditions" element={<TermsConditions />} />
        </Route>
        <Route path="*" element={<Error />} />
      </Routes>
    </BrowserRouter>
  );
}

import {useState,useEffect} from 'react';
import {useParams} from 'react-router';
const Error = (props)=>{
    useEffect(()=>props.handleShow(false),[]);
    return <>Error Page</>
}

function App() {
const {id} = useParams()
const [show,setShow] = useState(true);
   useEffect(()=>{
      setShow(true)
   },[id])
  return (
    <>
        <BrowserRouter>
            {show&&<Header />}
            <Routes>
                <Route exact path="/" element={<Home popup={showVideoPopup} />} />
                <Route exact path="/about" element={<About />} />
                <Route exact path="/contact" element={<Contact />} />
                <Route exact path="/faq" element={<Faq />} />
                <Route exact path="/privacy-policy" element={<PrivacyPolicy />} />
                <Route exact path="/disclaimer" element={<Disclaimer />} />
                <Route exact path="/terms-conditions" element={<TermsConditions />} />
                <Route path="*" element={<Error handleShow={(res)=>setShow(false)} />} />
            </Routes>
            {show&&<Footer />}
        </BrowserRouter>
    </>
);
}

export default App;