Hola, soy nuevo en React JS y no sé cómo trabajar con react router dom. En realidad, no quiero mostrar Encabezado y pie de página en la página de error en 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;Puede crear una ruta de diseño que represente los componentes de Header y pie de Footer , y un componente de Outlet para rutas anidadas.
Se debe usar un
<Outlet>en los elementos de ruta principales para representar sus elementos de ruta secundarios. Esto permite que la interfaz de usuario anidada se muestre cuando se representan las rutas secundarias. Si la ruta principal coincide exactamente, generará una ruta de índice secundaria o nada si no hay una ruta de índice.
Ejemplo:
import { Outlet } from 'react-router-dom'; const PageLayout = () => ( <> <Header /> <Outlet /> // <-- nested routes render out here <Footer /> </> ); PageLayout el componente PageLayout en una ruta y ajuste todo excepto la ruta de error.
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;