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