[React v6] Header 적용하기

Header를 적용할 컴포넌트들에 

 

<Route element={<Layout />}> </Route> 로 감싸기

return (
    <div className ='container-md'> 
      <Routes>
        <Route element={<Layout />}>
          <Route exact path="/home" element={<Home />}/>
          <Route exact path="/ewForm" element={<EwForm />}/>
        </Route>

        <Route exact path="/login" element={<Login />}/>
        <Route exact path="*" element={<h3><b>NOT FOUND PAGE</b></h3>} />  
      </Routes>
    </div>
  );

 

 

Layout.js

Layout.js 에서 Outlet 기능을 이용.

Outlet 위에 Header를 배치.

만약, Footer가 필요하다면 Footer를 만들고 Outlet 밑에 배치하면 된다.

import { Outlet } from 'react-router-dom';
import Header from './Header.js'

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

export default Layout;

 

 

Header.js

import React from 'react';
import { useNavigate } from 'react-router-dom';

function Header() {
  const navigate = useNavigate();

  return (
    <div style={{ background: 'lightgray', padding: 5, fontSize: 15 }}>
      <button>로그아웃</button>
    </div>
    
  );
}

export default Header;