Как я могу скрыть компонент заголовка на странице входа

У меня есть глобальный компонент заголовка внутри моего маршрутизатора. Но я хочу скрыть на странице входа.

Я пытался использовать решение 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;

reactjs react-hooks react-router react-router-dom

20.03.2022 19:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>
    </>
  );
}

20.03.2022 20:12

Другие вопросы по теме

Реагировать на useRef useImperativeHandle

Не удается получить API — «Отклонение необработанного обещания»

REACT: Как создать многоразовый пользовательский хук с функциями и эффектами, которые могут изменяться и реагировать на изменения в данных хост-компонента

Все атрибуты объекта ответа не являются нулевыми, но некоторые атрибуты объекта отображаются как нулевые

ReactJS не выполняет повторный рендеринг после изменения контекста

Обновить текст кнопки при нажатии, отображаемом с использованием метода карты в ReactJS

Проверьте имя пользователя, пароль - Форма входа с использованием React Hooks

Скрыть/показать состояние реакции div

Почему не работает сортировка в функции setSomething хука useState?

Я хочу создать массив непересекающихся случайных чисел

Как я могу скрыть компонент заголовка на странице входа

Ответы 1

Другие вопросы по теме

Похожие вопросы