How can I hide header component in Login page-CodePudding

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;

CodePudding user response：

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>
    </>
  );
}

CodePudding user response：

To solve this, you can wrap your header component in the withRouter function from react-router-dom to provide access to location and history.

So inside of your header component:

const header = () => {
  const location = useLocation()
  if(location.pathname === '/login') return null
  return <h1>I'm a header</h1>
}

export default withRouter(header)

So then in App.js, you always render the header and move the logic within the header component (show null / return component based on pathname)