Layout

navbar 등 모든 페이지에서 사용되는 컴포넌트의 경우
react-router-dom의 기능을 이용해 쉽게 Layout을 구성할 수 있다

1. 해당 레이아웃을 사용할 Route를 감싸는 Route를 작성
2. Layout으로 사용할 컴포넌트를 불러와 element에 등록한다
3. Layout 컴포넌트에선 Outlet이라는 컴포넌트를 react-router-dom에서 받아온다
4. Layout에서 다른 페이지의 컴포넌트가 들어갈 위치에 Outlet을 넣어준다

// App.tsx

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Frige from "./components/Frige";
import Home from "./components/Home";
import Layout from "./components/Layout";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/frige" element={<Frige />} />
        </Route>
      </Routes>
    </Router>
  );
};
export default App;

// Layout.tsx

import NavBar from "./NavBar";
import { Outlet } from "react-router-dom";

const Layout = () => {
  return (
    <div>
      <NavBar />
      <main>
        hi
        <Outlet />
      </main>
    </div>
  );
};
export default Layout;

const NavBar = () => {
  return (
    <nav>
      <h1>navbar</h1>
    </nav>
  );
};
export default NavBar;