Hi I am new in React JS and I don't know how to work with react router dom. Actually I don't want to show Header & Footer on Error page in React JS

function App() {
    return (
        <>
            <BrowserRouter>
                <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 />} />
                </Routes>
                <Footer />
            </BrowserRouter>
        </>
    );
}

export default App;

CodePudding user response：

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

CodePudding user response：

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;