리액트 라우터와 Outlet 구현 연습

- 처음 작성 했던것

import { Routes, Route } from "react-router-dom";
import Video from "./components/Video/Video";
import VideoDetail from "./components/Video/VideoDetail";
import NotFoundPage from "./pages/NotFoundPage";

function App() {
  return (
    <>

    <Routes>
    {/* /videos로 접속, /videos/아무거나 접속 페이지 */}
    <Route path="/videos" element ={<Video/>}>
    <Route path=":id" element ={<Video/>}/>
    </Route>


    {/* /videos/watch로 접속, /videos/watch/아무거나 접속 페이지 */}
    <Route path="/videos/watch" element ={<VideoDetail/>}>
    <Route path=":id" element ={<VideoDetail/>}/>
    </Route>

    {/* 조건에 충족하지 않는 페이지일시에 보여줄 404페이지, 이건 맨 밑에 두는게 나음 */}
    <Route path="*" element={<NotFoundPage/>} />
    </Routes>
    </>
  );
}

export default App;

- 더 나은 버전

import { Routes, Route } from "react-router-dom";
import Video from "./components/Video/Video";
import VideoDetail from "./components/Video/VideoDetail";
import NotFoundPage from "./pages/NotFoundPage";
import Card from "./components/UI/Card";

function App() {
  return (
    <>
      <Routes>
    // 1.  메인 컴포넌트를 감싼 Card 컴포넌트 보여주기
      <Route path="/" element={<Card />}> 
    
    // 2. http://localhost:3000/videos/ 로 접속하면 보여줄 컴포넌트
      <Route path="videos" element ={<Video/>}/>
        
   	// 3. http://localhost:3000/videos/아무거나입력 으로 접속하면 보여줄 컴포넌트   
      <Route path="videos/:id" element ={<VideoDetail/>}/>
        
    // 4. http://localhost:3000/videos/watch로 접속하면 보여줄 컴포넌트   
      <Route path="videos/watch" element={<VideoDetail />} />
        
    // 5. http://localhost:3000/videos/watch/아무거나입력 으로 접속하면 보여줄 컴포넌트      
      <Route path="videos/watch/:id" element={<VideoDetail />} />
      </Route>

    // 6. 모든 조건을 충족하지 못했을때 보여줄 컴포넌트 
      <Route path="*" element ={NotFoundPage}/>
      </Routes>
    </>
  );
}

export default App;

- Card 컴포넌트

import React from "react";
import classes from "./Card.module.css";
import { Outlet } from "react-router-dom";
import Header from "../Header/Header";

function Card() {
  return (
    <div className={classes.Card_Container}>
      <Header />
      <Outlet /> // 여기에 라우트 내용들이 보여짐
    </div>
  );
}

export default Card;