준비
- 리액트 프로젝트의 터미널에서
npm install react-router-dom 명령어를 실행한다
![](https://velog.velcdn.com/images/jaybon/post/0d06ef08-b9ac-4aba-b9b8-4dbfbb4f3e69/image.png)
- package.json의 dependencies에서 해당 라이브러리가 설치되어 있는지 확인한다
![](https://velog.velcdn.com/images/jaybon/post/c8edac2e-7e6d-4a91-90d5-bd4facea4deb/image.png)
- src 하위에 page 폴더를 만들고 Page1.jsx와 Page2.jsx 파일을 임시로 만든다
![](https://velog.velcdn.com/images/jaybon/post/8730d0f5-40cf-4484-9c9a-efec91ce62f9/image.png)
![](https://velog.velcdn.com/images/jaybon/post/c850e000-8fbd-47f3-bd6f-e79e6799440e/image.png)
![](https://velog.velcdn.com/images/jaybon/post/970e1f8a-2882-428f-a12a-7929970ae0b9/image.png)
페이지 세팅
App.jsx에서 페이지 주소를 매핑한다.
예상외의 경로 (*)일 경우에는 준비된 페이지로 이동하도록 세팅하는 방법도 있다.
![](https://velog.velcdn.com/images/jaybon/post/26677497-39dc-4098-91a8-3a09dd3bfe47/image.png)
개발 실행
npm run dev 명령어로 실행하여 테스트 해 본다.
![](https://velog.velcdn.com/images/jaybon/post/55c08828-557e-408d-a243-49a727cf8c1e/image.png)
![](https://velog.velcdn.com/images/jaybon/post/6b71a545-85b3-43e7-a4ab-702609ba4f14/image.png)