[React] react-router-dom를 이용해 세부 페이지로 이동하기

안녕하세요? 오늘은 router를 이용해서 메뉴를 클릭 했을 때 다른 세부 페이지로 연결해 이동하는 기능을 구현해보겠습니다.

 

react-router-dom 설치

1. terminal 창에

npm install react-router-dom

(= npm i react-router-dom)

을 입력한다.

 

 

2. index.js 파일에 <App /> 컴포넌트를 감싸주는 <BrowserRouter> 태그를 생성한다.

그리고 상단에 BrouserRouter를 import 해준다.

import { BrowserRouter } from 'react-router-dom';

 

=> 다 쓴 후 꼭 저장한다!

 

 

 

 

3. App.js 파일로 돌아와서 상단에 Router 요소들을 import 한다.

 

import { Routes, Route } from 'react-router-dom';

 

 

4. return() <div>안에 <Routes> 태그로 <Route> 들을 감싼다.

<Routes>

     <Route path="/주소명"  element={페이지에 들어갈 것} />

</Routes>

 

ex1) element 안에 직접 코드를 집어넣는 경우

<Route path="/detail" element={<div>상세페이지입니다.</div>} />

 

ex2) element 안에 컴포넌트를 집어넣는 경우

<Route path="/detail" element={ <detail /> } />

 

 

 

5. 현 주소창 뒤에 path에서 설정한 주소를 붙여주면 페이지 이동이 가능하다.