[TIL 8] React Router 기본 정리

React-Router 개념 정리

• 라우팅 : 사용자가 요청한 URL에 따라, 어플리케이션 내의 각각 다른 컴포넌트 사이에서 해당 URL에 맞는 UI를 보여주는 것
• React-Router : 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리

React Router 컴포넌트

• Router Component : 사용자가 입력한 주소를 감지하는 역할

1. 루트 컴포넌트를 <BrowserRouter> 로 감싸준다.

• BrowserRouter : HTML5를 지원하는 브라우저의 주소를 감지 한다.
• HashRouter : 해시 주소(http://www.test.com/**#test** )를 감지 한다.

2. url별로 다른 컴포넌트를 생성한다.

3. <Routes>와 <Route>를 사용하여 라우트 컴포넌트를 만든다.

• <Routes>는 여러 Route를 감싸서 그 중 규칙이 일치하는 <Route> 하나만을 렌더링 시켜주는 역할을 한다.
• <Route> 에는 이동할 URL을 path 속성으로, 렌더링 할 컴포넌트를 element 속성으로 넣는다.

참고

React Router Tutorial