[react] nav 원하는 페이지에만 띄우기

Nav나 Footer같이 일정 화면에서는 필요 없을 경우 쓰는 코드:

구글링으로 찾아보니 대부분 v6이전 것들 혹은 좀 복잡한 것들이였는데 이 방법은 되게 간단했다.

import React from 'react';
import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
import Main from './pages/Main/Main';
import Nav from './Components/Nav/Nav';
import Cart from './pages/Cart/Cart';
import ItemDetail from './pages/ItemDetail/ItemDetail';
import ItemList from './pages/ItemList/ItemList';
import Login from './pages/Login/Login';
import Register from './pages/Register/Register';
import Footer from './Components/Footer/Footer';
import Purchase from './pages/Purchase/Purchase';
import EndPage from './pages/EndPage/EndPage';

const NavbarLayout = () => (
  <>
    <Nav />
    <Outlet />
    <Footer />
  </>
);

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route path="/register" element={<Register />} />
        <Route path="/endpage" element={<EndPage />} />
        <Route element={<NavbarLayout />}>
          <Route path="/" element={<Main />} />
          <Route path="/cart" element={<Cart />} />
          <Route path="/itemdetail/:id" element={<ItemDetail />} />
          <Route path="/order" element={<Purchase />} />
          <Route path="/itemlist/:category/:id" element={<ItemList />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
export default Router;

이런식으로 Outlet 기능을 써서 component를 만든후 이에 nav나footer가 필요한 페이지들을 포함시킨다