How to hide footer and menu when notfound page rendering in Router v6

Question

As you can see I want to hide menu bar and footer when notfound page is rendering .I tried all the other solutions but didn't happen to work in my Scenario. I wanted the Navbar and footer hide in 3 notfound Page. I use react-router version 6 and fuctional App component. Please Help me figure out this solution `

    <Menubar />
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/home' element={<Home />} />
      <Route path='/inventory/:id' element={
        <PrivateRoute>
          <Inventory />
        </PrivateRoute>
      } />

      <Route path='/manageinventory' element={
        <PrivateRoute>
          <ManageInventory />
        </PrivateRoute>
      } />
      <Route path='/addinventory' element={
        <PrivateRoute>
          <AddInventory />
        </PrivateRoute>
      } />
      <Route path='/myitems' element={
        <PrivateRoute>
          <MyItems />
        </PrivateRoute>
      } />


      <Route path='/login' element={<Login />} />
      <Route path='/register' element={<Register />} />
      <Route path='/blogs' element={<Blog />} />
     
      <Route path='*' element={<NotFound  />} />
    </Routes>
      <Footer />

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

Use a master page that contains Navbar and Footer and each Created component will contains a master page except the notFound Page

{/* Layout component */}
import React from "react";
import Sidebar from "./Navbar ";
import Sidebar from "./Footer ";

const Layout = ({ children}) => {
return (
   <>
      <Navbar />
      <main>{children}</main>
      <Footer />
   </>
 );
};

export default Layout;

and for any new component, you will call the master page

{/* For Home, Inventory, ... components */}
import React from "react";
import Layout from "../components/Layout";

const Home = () => {

 return (
   <Layout>
     {/* your code jsx here */}
   </Layout>
  );
 };

export default DahsboardScreen;

How to hide footer and menu when notfound page rendering in Router v6

1 Answers1