reactjs - 如何在登录页面中隐藏标题组件

Question

我的路由器中有一个全局 header 组件。但是我想在登录页面隐藏。

我试过像这样使用 window.location 解决方案。它有效但在登录页面导航到主页后不起作用。 (在我刷新页面之前它不会显示标题)

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;

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