如何隐藏登录页面中的标题组件

Question

我的路由器内有一个全局标头组件。但我想隐藏在登录页面上。

我尝试使用这样的 window.location 解决方案。它可以工作，但在登录页面导航到主页后不起作用。（在我刷新页面之前它不会显示标题）

应用程序.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;

Answer 1

创建一个布局路由（有条件地）渲染该Header组件以及Outlet嵌套路由组件的一个组件。

例子：

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

或者，如果更容易分离路由，"/login"您可以创建一个布局路由，无条件渲染Header组件并单独渲染登录路由。

例子：

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