React Router Dom，仅显示某些页面的Header组件[重复]答案

【问题标题】：React Router Dom, show Header component only for some pages [duplicate]React Router Dom，仅显示某些页面的Header组件[重复]
【发布时间】：2022-10-23 03:10:35
【问题描述】：

Header 将出现在除ConfirmEmail 之外的所有组件中。基本上我不希望Header 在打开ConfirmEmail 组件时出现。我应该怎么办？

路由器设置：

import React from 'react';
import {BrowserRouter,Routes ,Route} from 'react-router-dom'
import Header from "../Components/Header";
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import Home from '../Components/Home';
import Contact from '../Components/Contact';
import Login from '../Components/Login';
import Register from '../Components/Register';
import ConfirmEmail from '../Components/SuccessEmailApproved';


const App = () =>{
  return(
    <BrowserRouter>
      <Header/>// If confirmEmail component is opened, hide it here
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/home" element={<Home/>} />
        <Route path="/ev" element={<Home/>} />
        <Route path="/contact" element={<Contact/>} />
        <Route path="/iletisim" element={<Contact/>} />
        <Route path="/login" element={<Login/>} />
        <Route path="/giris" element={<Login/>} />
        <Route path="/register" element={<Register/>} />
        <Route path="/kayit" element={<Register/>} />
        <Route path="/ConfirmEmail" element={<ConfirmEmail />} /> //I don't want the header component to appear if this is opened. but it will appear in other components.
      </Routes>
    </BrowserRouter>
  );
}


export default App;

更新：

尝试了以下解决方案并且它正在工作，但是有更好的方法吗？

{window.location.pathname !== "/ConfirmEmail" ?<Header/>:<></>}

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

您可以创建一个Layout.js 组件，如下所示。这是在 React Router Dom v6 中为多个页面设置相同结构的常用方法。

import { Outlet } from "react-router-dom";
import Header from "../Header"; // ⚠️ verify it's the correct path

const Layout = () => {
  return (
    <>
      <Header />
      <Outlet />
    </>
  );
};

export default Layout;

并更改App 如下。注意 ConfirmEmail 页面从您想要的页面中省略 Header：

// ⚠️  previous imports
import Layout from "./components/Layout"; // ⚠️ verify it's the correct path

const App = () =>{
  return(
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home/>} />
          <Route path="/home" element={<Home/>} />
          <Route path="/ev" element={<Home/>} />
          <Route path="/contact" element={<Contact/>} />
          <Route path="/iletisim" element={<Contact/>} />
          <Route path="/login" element={<Login/>} />
          <Route path="/giris" element={<Login/>} />
          <Route path="/register" element={<Register/>} />
          <Route path="/kayit" element={<Register/>} />
        </Route>
        <Route path="/ConfirmEmail" element={<ConfirmEmail />} /> 
      </Routes>
    </BrowserRouter>
  );
}

export default App;

您可以拥有任意数量的布局（MainLayout、AuthLayout、Layout...）。设置是相同的，Outlet 和 Route 将您的 Layout 设置为 element 并包装该 Layout 的页面。

【讨论】：