리액트 nested routes 연습

import { Routes, Route, Outlet } from "react-router-dom";
import Home from "./components/Home/Home";
import Card from "./components/Card/Card";
import Header from "./components/Header/Header";
import AllProducts from "./components/AllProducts/AllProducts";

function App() {
  return (
    <>
      <Header />
      <Outlet />

      <Routes>
        <Route path="/" element={<Home />}>
        {/* 이런식으로 / 안에 products라는 라우트가 하나 더 있으면 Home 컴포넌트 안에
      Outlet이 또 있어서 Allproducts 컴포넌트가 그 자리에 들어가게 됨 */}
          <Route path="products" element={<AllProducts />} />
        </Route>
      </Routes>
    </>
  );
}

export default App;

Home 컴포넌트

function Home() {
  return (
    <Card>
      <h1>Product</h1>
      <Outlet />
    </Card>
  );
}