2024 React Full Course (feat. Recoil) - 1. React router 설정

https://www.youtube.com/watch?v=Yv5tSNr4h2c&list=WL&index=14

 

지난 시간에 npm, yarn을 혼용하는거에 대해 왜 이렇게 하지라는 생각이 들었는데... 강의 초반에 이것에 관해 사과를 하더라...

 

저번 블로그에 적지를 못한게 있는데

프로젝트 생성되면 App.css, index.css 삭제를 해준다.

main.tsx 에 있는 

import './index.css'

 

부분을 삭제해준다.

 

그 이후 App.tsx 파일로 가서 기존 코드는 다 삭제해주시고 rfce를 입력해주시면 된다.

 

App.tsx 에 

 

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import MainPage from '@pages/index'
import AboutPage from '@pages/about'
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index path="/" element={<MainPage />} />
        <Route index path="/about" element={<AboutPage />} />
        <Route index path="/about/:id" element={<AboutPage />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

 

이렇게 입력해주면 about 뒤에 about/1 또는 about/100을 입력해도 같은 about 페이지가 나온다.