- 설치
yarn add react-router-dom- 사용법
BrowerRouter라는 컴포넌트를 사용하여 감싸면 된다.
BrowerRouter 컴포넌트
애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있게 해준다.
라우터로 사용할 페이지 컴포넌트 만들기
✔ 사용자가 웹 사이트에 들어왔을 때 맨 처음 보여질 Home 컴포넌트
✔ 웹 사이트를 소개하는 About 컴포넌트
Route 컴포넌트로 특정 주소에 컴포넌트 연결
Route라는 컴포넌트를 사용하여 사용자의 현재 경로에 따라 다른 컴포넌트를 보여줄 수 있으며 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여 줄지 정의 가능하다.
<Route path="주소규칙" element={보여 줄 컴포넌트} />
➡ 결과
