(React) 쇼핑몰 만들기 - 리액트 라우터 - 셋팅과 라우팅 개념

미리보기 종료하고 터미널에서 아래 명령어 입력.
npm install react-router-dom
라우터 설치 됨.
npm start 입력.
index.js 파일로 가서

.
.
import { BrowserRouter } from "react-router-dom"
.
.
<BrowserRouter>
  <App/>
</BrowserRouter>

추가된 코드 적용해준다.

App.js 파일에서

.
.
import { Routes, Route, Link } from "react-router-dom"
.
.
<Link to="/">메인화면</Link>
<br />
<Link to="/detail">상세화면</Link>
.
.
<Routes>  
   <Route path="/" element={<div>메인페이지</div>} />
   <Route path="/detail" element={<div>상세페이지</div>} />
</Routes>

Link 👉 태그를 누르면 그 주소에 해당하는 페이지를 보여준다.
Route 👉 path 에 해당하는 주소로 이동했을 때 element 안에 있는 요소를 페이지에서 보여준다.
이것을 라우팅이라고 한다.