react router

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
// BrowserRouter를 import를 해준다.
import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")).render(
  //App 컴포넌트를 감싸준다.
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

import "./App.css";
// Routes와 Route를 import해준다.
import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import NotFound from "./pages/NotFound";

// 페이지들
// 1. "/" 모든 일기를 조회하는 home 페이지
// 2. "/new" : 새로운 일기를 작성하는 new 페이지
// 3. "/diary" : 일기를 상세히 조회하는 diary 페이지
function App() {
  return (
    <>
      //Routes 밖에 있는 태그는 모든 화면에 렌더링이 된다.
      <div>header</div>
      //Routes로 감싸고 가야할 페이지를 Route에 넣어준다. //Route에는 원하는
      경로 path와 렌더링할 컴포넌트를 element에 넣어준다.
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="/diary" element={<Diary />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </>
  );
}

export default App;