React Router Dom, show Header component only for some pages

Question

Header will appear in all components except ConfirmEmail. Basically, I don't want the Header to appear when the ConfirmEmail component is opened. What should I do?

Router setup:

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;

Update:

Tried the below solution, and it's working, but is there a better way?

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

Answer 1

You could create a Layout.js component like below. It's kind of the common way to set up the same structure for multiple pages in 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;

And change App as below. Notice ConfirmEmail page is left out from the pages where you want 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;

You can have as many layouts as you want (MainLayout, AuthLayout, Layout...). The setup is the same, an Outlet and a Route that has your Layout as element and wraps the pages for that Layout.