Как сохранить общие компоненты React фиксированными на всех страницах вместо того, чтобы вызывать их снова и снова на каждой странице

Question

Предположим, в моем приложении я хочу, чтобы заголовок *, панель навигации, хлебная крошка и панель календаря * присутствовали на всех страницах, кроме страницы входа в систему.

Итак если я упомяну эти компоненты в файле приложения. js, они также будут отображаться на странице входа. Я явно не хочу, чтобы пользователь видел их до входа в систему.

В файле приложения. js Я использую React Router для маршрутизации.

Скриншот приложения. Заголовок, панель навигации, крошка и панель календаря отмечены снимок экрана страницы приложения

import React from "react";
import HomePage from "./components/HomePage";
import AboutPage from "./components/AboutPage";
import { Route, Switch, Redirect } from "react-router-dom";
import NoPageFound from "./components/NoPageFound";
import InterfaceMonitoringPage from "./pages/InterfaceMonitoringPage";
import ChainPreOrdering from "./pages/ChainPreOrdering";
import ChainOrderMonitoring from "./pages/ChainOrderMonitoringPage";
import JarvisDrillDownPage from "./pages/DrillDownPage";
import MismatchesPage from "./pages/MisMatchesPage";
import LoginPage from "./pages/LoginPage";
import DevArea from "./pages/DevArea";

//Importing fontawesome icons
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faHome,
  faAtom,
  faUser,
  faCalendarWeek
} from "@fortawesome/free-solid-svg-icons";
library.add(faHome, faAtom, faUser, faCalendarWeek);

function App() {
  return (
    <>
      <Switch>
        <Route
          path="/"
          exact
          render={props => <LoginPage {...props} PageTitle="LoginPage" />}
        />
        <Route
          path="/homepage"
          exact
          render={props => <HomePage {...props} PageTitle="HomePage" />}
        />
        <Route path="/about" component={AboutPage} />
        <Route
          path="/chainpre-ordermonitoring"
          render={props => (
            <ChainPreOrdering
              {...props}
              PageTitle="Chain Pre-Order Monitoring Page"
            />
          )}
        />
        <Route
          path="/chainordermonitoring"
          render={props => (
            <ChainOrderMonitoring
              {...props}
              PageTitle="Chain Order Monitoring Page"
            />
          )}
        />
        <Route
          path="/interface-monitoring-page"
          render={props => (
            <InterfaceMonitoringPage
              {...props}
              PageTitle="Interface Monitoring Page"
            />
          )}
        />
        <Route
          path="/DevArea"
          render={props => <DevArea {...props} PageTitle="DevArea" />}
        />
        <Route
          path="/drilldown-page/:systemName"
          render={props => (
            <JarvisDrillDownPage {...props} PageTitle="Drill Down Page" />
          )}
        />
        <Route
          path="/mismatches-page/:SourceSystem/:EndSystem"
          render={props => (
            <MismatchesPage {...props} PageTitle="Drill Down Page" />
          )}
        />
        <Redirect from="/about-page" to="/about" />
        <Route component={NoPageFound} />
      </Switch>
    </>
  );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

-------- ОБНОВЛЕНИЕ --------- После того, как ответ Брайана внес изменения

Но панель календаря не должна присутствовать на домашней странице

function App() {
  return (
    <>
      <Switch>
        <Route
          path="/"
          exact
          render={props => <LoginPage {...props} PageTitle="LoginPage" />}
        />
        <Route
          path="/"
          render={props => (
            <>
              <JarvisHeader />
              <NavigationBar />
              <JarvisCalendarBar />
            </>
          )}
        />
      </Switch>
      <Switch>
        <Route
          path="/"
          exact
          render={props => <LoginPage {...props} PageTitle="LoginPage" />}
        />
        <Route
          path="/homepage"
          render={props => <HomePage {...props} PageTitle="HomePage" />}
        />
        <Route path="/about" component={AboutPage} />
        <Route
          path="/chainpre-ordermonitoring"
          render={props => (
            <ChainPreOrdering
              {...props}
              PageTitle="Chain Pre-Order Monitoring Page"
            />
          )}
        />
        
        -----Rest of the Code
        
         </>
  );
}

export default App;

Answer 1

Вы можете добавить второй переключатель над первым, который отвечает за отображение или скрытие этих компонентов. Может быть как то так?

function App() {
  return (
    <>
      <Switch>
        <Route exact path="/">    // Matches on the login path
          <span/>
        </Route>
        <Route path="/">          // Matches everything else
          <YourSharedComponents />
        </Route>
      </Switch>
      <Switch>
        <Route
          path="/"
          exact
          render={props => <LoginPage {...props} PageTitle="LoginPage" />}
        />
        <Route
          path="/homepage"
          exact
          render={props => <HomePage {...props} PageTitle="HomePage" />}
        />

        // Condensed
        *******************************

        <Route component={NoPageFound} />
      </Switch>
    </>
  );
}

Answer 2

Скажем, например, что вы хотите включить боковую панель или панель навигации в каждый маршрут, чтобы вы могли сделать это

import React, {Fragment} from 'react';

function index(props) {
    return (
        <Fragment>
            <TopNav {...this.state}/>
            <div className="container">
                <Switch>
                    <Route path={`${match.url}/home`} component={Home} />
                    <Route path={`${match.url}/contact`} component={Contact} />
                    <Route path={`${match.url}/notification`} component={Notification} />
                    <Route component={ErrorPage} />
                </Switch>
            </div>
        </Fragment>
    );
}

export default index;

Вот так верхняя панель навигации будет включена во все маршруты

Обновлено: если вы хотите показать его условно

{localStorage.getItem('token') !== null && <TopNavBar/>}

Итак, теория такова: вы должны проверить, вошел ли пользователь в систему или нет. Предположим, что вошедший в систему пользователь имеет токен в локальном хранилище. Так что если локальное хранилище не равно нулю. Это означает, что пользователь вошел в систему, затем отобразит панель навигации, если условие ложно, оно не будет отображать панель навигации.