How can I hide header component in Login page

user_17939803 0
Viewed 1825

I have a global header component inside my router. But I want to hide on the login page.

I tried to use window.location solution like this. It works but doesn't work after the login page navigates to the homepage. (it doesn't show header till I refresh the page)

App.js


import React, { useState, useEffect } from "react";
import "./sass/app.scss";
import { db, auth } from "./configs/firebase-config";
import { MainContext } from "./hooks/Context";
import { eventbriteRoutes } from "./configs/routes";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Header from "./components/Home/Header";

function App() {
  const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));

  const data = {
    isAuth,
    setIsAuth,
  };

  return (
    <>
      <MainContext.Provider value={data}>
        <Router>
          {window.location.pathname !== "/login" ? <Header /> : null}{" "}
          <Routes>
            {eventbriteRoutes.map((RouteItem, index) => (
              <Route
                exact
                key={index}
                path={RouteItem.path}
                element={RouteItem.element}
              />
            ))}
          </Routes>
        </Router>
      </MainContext.Provider>
    </>
  );
}

export default App;
react-router-dom react-router react-hooks reactjs
2 Answers

Create a layout route that renders (conditionally) the Header component and an Outlet component for the nested route components.

Example:

import { Outlet, useLocation } from 'react-router-dom';

const Layout = ({ hideHeaderPaths = [] }) => {
  const { pathname } = useLocation();

  return (
    <>
      {!hideHeaderPaths.includes(pathname) && <Header />}
      <Outlet />
    </>
  );
}

...

function App() {
  const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));

  const data = {
    isAuth,
    setIsAuth,
  };

  return (
    <>
      <MainContext.Provider value={data}>
        <Router>
          <Routes>
            <Route element={<Layout hideHeaderPaths={["/login"]} />}>
              {eventbriteRoutes.map((RouteItem) => (
                <Route
                  key={RouteItem.path}
                  path={RouteItem.path}
                  element={RouteItem.element}
                />
              ))}
            </Route>
          </Routes>
        </Router>
      </MainContext.Provider>
    </>
  );
}

Or if it's easier to just separate the "/login" route you can just create a layout route that unconditionally renders the Header component and render the login route separately.

Example:

import { Outlet } from 'react-router-dom';

const HeaderLayout = () => (
  <>
    <Header />
    <Outlet />
  </>
);

...

function App() {
  const [isAuth, setIsAuth] = useState(localStorage.getItem("isAuth"));

  const data = {
    isAuth,
    setIsAuth,
  };

  return (
    <>
      <MainContext.Provider value={data}>
        <Router>
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route element={<HeaderLayout} />}>
              {eventbriteRoutes.map((RouteItem) => (
                <Route
                  key={RouteItem.path}
                  path={RouteItem.path}
                  element={RouteItem.element}
                />
              ))}
            </Route>
          </Routes>
        </Router>
      </MainContext.Provider>
    </>
  );
}
user_86908570

Could potentially just remove it from the app.js and include it on the pages you want for it to be on. Or add class to make it display none based on the route

user_126795190
Related