In react, how to hide a specific Route like header and footer from a particular page with react-router-dom@6?

Question

I'm a react developer and I would like to learn the best way to hide header and footer from a page like 404 page.

Here is my app.js file code...

import { Route, Routes } from 'react-router-dom';
import './App.css';
import AddItem from './Components/Pages/AddItem/AddItem';
import Footer from './Components/Pages/Footer/Footer';
import Header from './Components/Pages/Header/Header';
import Login from './Components/Pages/Login/Login/Login';
import Signup from './Components/Pages/Login/Signup/Signup';
import ManageInventories from './Components/Pages/ManageInventories/ManageInventories';
import Page404 from './Components/Pages/NotFound/Page404';
import RequireAuth from './Components/Pages/Shared/Auth/RequireAuth';

function App()
return (
 <>
  <Header />
<Routes>
<Route path='/' element={<Home />}></Route>
    <Route path='/inventory/:inventoryId' element={
      <RequireAuth>
        <UpdateInventory />
      </RequireAuth>
    }></Route>
<Route path='/manageinventories' element={<ManageInventories />}></Route>
    <Route path='/additem' element={
      <RequireAuth>
        <AddItem />
      </RequireAuth>
    }></Route>
    <Route path='/myitems' element={
      <RequireAuth>
        <MyItems />
      </RequireAuth>
    }></Route>
    <Route path='/login' element={<Login />}></Route>
    <Route path='/signup' element={<Signup />}></Route>
    <Route path='*' element={<Page404/>}></Route>
  </Routes>
<Footer/>
</>
);

}

export default App;

score -1 · Answer 1 · answered May 02 '22 at 11:17

I see that you are using react-router-dom@6, so you can easily create LayoutRoute which will help you to make wrapping single or multiple child routes in the same layout simpler.

https://reactrouter.com/docs/en/v6/getting-started/concepts#layout-routes

Example:

  <Route element={<404PageLayout />}>
    <Route path="/*" element={<Page404 />} />
  </Route>

and of course, in your Layout Page you can define layout without header and footer, but just with <Outlet /> - https://reactrouter.com/docs/en/v6/getting-started/concepts#outlets

In react, how to hide a specific Route like header and footer from a particular page with react-router-dom@6?

1 Answers1