How to hide Footer component for some pages in react

Question

i would like to hide footer component in some page

app.js

<div className="App">
  <Header setShowMenu={setShowMenu} />
  {showMenu ? <Menu navigateTo={navigateTo} setShowMenu={setShowMenu} /> : null}
  <Main navigateTo={navigateTo} />
  <Footer navigateTo={navigateTo} />
</div>

main.jsx

<div>
    <Routes>
        <Route path="/" element={<HomePage navigateTo={navigateTo} />}  />
        <Route path="/precard" element={<PreCard />}  />
        <Route path="/order" element={<Order />}  />
        <Route path="/contact" element={<Contact />}  />
        <Route path="/thankspage" element={<ThanksPage navigateTo={navigateTo}/>}  />
        <Route path="/*" element={<HomePage />} />
    </Routes>
</div>

Note: The Router in index.js

So I want to hide the footer in ./order Page

I hope you guys have solution for me :)

Answer 1

You can use useLocation() hook to check the route path in the <Footer /> component and based on the pathname you can render the <Footer /> component.

Example :

import React from "react";
import { useLocation } from "react-router-dom";

const Footer = () => {
  const { pathname } = useLocation();
  console.log(pathname);
  // you can check a more conditions here
  if (pathname === "/thanks") return null;

  return <div className="footer">Footer</div>;
};
export { Footer };

App.js

import { Route, Switch, BrowserRouter } from "react-router-dom";
import "./styles.css";
import { Home } from "./pages/Home";
import { Catalog } from "./pages/Catalog";
import { Thanks } from "./pages/Thanks";
import { Header } from "./components/Header";
import { Footer } from "./components/Footer";
import { Page404 } from "./pages/Page404";

const App = () => {

  return (
    <>
      <BrowserRouter>
        <Header />
        <Switch>
          <Route path={"/"} exact>
            <Home />
          </Route>
          <Route path={"/catalog"} exact>
            <Catalog />
          </Route>
          <Route path={"/thanks"} exact>
            <Thanks />
          </Route>
          <Route path={"*"}>
            <Page404 />
          </Route>
          {/* <Redirect to={'/'} /> */}
        </Switch>
        <Footer />
      </BrowserRouter>
    </>
  );
};

export { App };