컴포넌트 안보이게 하는법

[쥬니]

안녕하세요! 리액트 강의 계속 수강중인 학생입니다
강의 너무 잘 듣고있습니다. 항상 감사할 따름입니다..
제가 개인적으로 공부하고있는 프로젝트와 관련해서 질문이 있는데요. 혼자 계속 고민하다가 물어볼 곳이 없어서 여쭤봅니다..

다음 App.js코드에서 

import logo from './logo.svg';
import './App.css';
import { useState, useEffect } from 'react';
import { Button, Container, Nav, Navbar, Row, Col } from 'react-bootstrap';
import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom';
import Animore_logo from './img/13.png';
import Editprofile from './pages/editprofile';
import Home from './pages/home';
import Memberinfo from './pages/memberInfo';
import Withdrawal from './pages/withdrawal';
import Inforeset from './pages/inforeset';
import IsWithdrawn from './pages/isWithdrawn';
import WithdrawalConf from './pages/withdrawalConf';

function App() {
  let navigate = useNavigate();

  const [activeItem, setActiveItem] = useState('/');
  const [showMypagemenu, setShowMypagemenu] = useState(true);
  const [showHeader, setShowHeader] = useState(true);

  const handleItemClick = (path) => {
    setActiveItem(path);
    navigate(path);
  };

  useEffect(() => {
    if (window.location.pathname === '/withdrawalConf') {
      setShowMypagemenu(false);
      setShowHeader(false);
    } else {
      setShowMypagemenu(true);
      setShowHeader(true);
    }
  }, []);

  return (
    <div className="App">
      <Header navigate={navigate}></Header>
      <section className='mypage'>
        <Mypagemenu navigate={navigate} activeItem={activeItem} handleItemClick={handleItemClick}></Mypagemenu>

        <Routes>
          <Route path="/profile" element={
            <Editprofile></Editprofile>
          }
          />
          <Route path="/" element={
            <Home navigate={navigate}></Home>
          }></Route>
          <Route path="/memberinfo" element={
            <Memberinfo navigate={navigate}></Memberinfo>
          }>
          </Route>
          <Route path="/withdrawal" element={
            <Withdrawal navigate={navigate}></Withdrawal>
          }>
          </Route>
          <Route path="/userinfo-reset" element={
            <Inforeset navigate={navigate}></Inforeset>
          }></Route>
          <Route path="/iswithdrawn" element={
            <IsWithdrawn navigate={navigate}></IsWithdrawn>
          }></Route>
          <Route path="/withdrawalConf" element={
            <WithdrawalConf navigate={navigate}></WithdrawalConf>
          }></Route>
          <Route path='*' element={<div>없는 페이지</div>}></Route>
        </Routes>
      </section>
    </div>
  );
}

function Header(props) {
  return (
    <header>
      <div className='logo'>
        < img src={Animore_logo} onClick={() => props.navigate('/')} alt="로고"></img>
      </div>
      <div className="Navbar">
        

          <li onClick={() => props.navigate('/')}>홈
          <li onClick={() => props.navigate('/beautysalon')}>미용실
          <li onClick={() => props.navigate('/reservation')}>예약내역
          <li onClick={() => props.navigate('/mypage')}>마이페이지
          <li onClick={() => props.navigate('/logout')}>로그아웃
        
      </div>
    </header>
  )
}

function Mypagemenu(props) {
  return (
    <div className='menu'>
      

        <h4>MY PAGE</h4>
        <li
          className={props.activeItem === '/' ? 'active' : ''}
          onClick={() => props.handleItemClick('/')}
        >
          홈
        
        <li
          className={props.activeItem === '/faq' ? 'active' : ''}
          onClick={() => props.handleItemClick('/faq')}
        >
          FAQ
        
        <li
          className={props.activeItem === '/notice' ? 'active' : ''}
          onClick={() => props.handleItemClick('/notice')}
        >
          공지사항
        
        <li
          className={props.activeItem === '/memberInfo' ? 'active' : ''}
          onClick={() => props.handleItemClick('/memberInfo')}
        >
          회원정보 수정
        
        <li
          className={props.activeItem === '/withdrawal' ? 'active' : ''}
          onClick={() => props.handleItemClick('/withdrawal')}
        >
          회원탈퇴
        
      
    </div>
  )
}

export default App;

WithdrawalConf.js

import { useEffect, useState } from "react";
import './withdrawalConf.css';
import animore from '../img/animore.png';

function WithdrawalConf(props) {

    return (
        <div className="withdrawalConf">
            <span className="message7">회원탈퇴가 완료되었습니다.</span>
            <div className="confmessage">
                <div className="animore">
                    < img src={animore} alt="animore" width="170"></img>
                </div>
                <span className="message8">를 이용해주셔서 감사합니다.</span>
            </div>
            <button type="submit" className="confirm-button3"
                onClick={() => { props.navigate("/") }}
            >홈으로 돌아가기</button>
        </div>
    )
}

export default WithdrawalConf;

Routes에 설정한 경로들중에서 
/withdrawalConf의 url에서는 withdrawalConf.js의 컴포넌트만 보이게하고 싶은데(Header나 Mypagemenu 컴포넌트는 보이게 하고싶지 않습니다.)
코드를 어떻게 작성해야할지 잘모르겠습니다. useState로
const [showHeader, setShowHeader] = useState(true); 식으로 코드를 짜서 true일때 보이게하고,,이런식으로 짜봤는데 
리렌더링이 많다는 오류와, 페이지를 뒤로 또는 앞으로가기 했을때 다른 경로에서도 메뉴가 안보이게 된다던지.. 
여러 문제점들이있어서요
어떤 식으로 코드를 작성해야할까요?

다른 경로에서 보여지는 페이지

/withdrawalConf 에서 보여지는 페이지( 상단의 Header와 왼쪽 메뉴바가 없음)

[codingapple]

useLocation() 쓰면 현재 url 나오는데 그거가 /어쩌구면 컴포넌트보여주지말라고 if문 씁시다

[글쓴이]

글