[넷플릭스 클론코딩] 라우터 세팅

이 프로젝트에서는 홈페이지, 영화 페이지, 영화 상세페이지 총 3개의 페이지가 필요하다.

---

페이지를 전환하며 보여주기 위해서는 라우터를 적용하여야 한다.

index.js에서는 react-router-dom 모듈의 BrowserRouter를 적용시켜주고,
App.js에서는 Routes와 Route를 적용시켜 준다.

//index.js
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

//App.js
import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/movies" element={<Movies />} />
        <Route path="/movies/:id" element={<MovieDetail />} />
      </Routes>
    </div>
  );
}

Routes는 각각의 페이지를 바꿔주는 기능을 하고,
Route는 각 페이지의 경로(path)와 컴포넌트(element)를 정의하는 기능을 한다.

저장을 하고 프로젝트를 실행하면
http://localhost:3000/에 접속하면 홈페이지가,
http://localhost:3000/movies에 접속하면 영화 페이지가,
http://localhost:3000/movies/12423에 접속하면 영화 상세페이지가 나오게 된다.