goal
- react-router-dom을 사용해서 라우트하는 방법을 알아보자.
react-router-dom
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
react router의 3가지 주요 구성 범주
- 웹 애플리케이션에서 사용하는 모든 구성 요소는 react-router-dom에서 가져와야한다.
1.
<BrowserRouter>/<HashRouter>: 라우터
- 일반적으로 다음과 같이 라우터에서 최상위 요소를 rapping한다.
- history API를 사용해서 URL & UI 를 동기화하는 라우터다.
<BrowserRouter>
- react-router-dom에서 적용하고 싶은 컴포넌트의, 최상위 rapper 컴포넌트
- 일반 URL 경로를 사용 / 따라서, 서버를 올바르게 구성해야 한다.
<HashRouter>
- URL의 해시 부분에 현재 위치를 저장 / 특별한 서버 구성이 필요하지 않다.
2.
<Route>/<Switch>: 경로 일치 (route matchers)
-
<Switch>가 렌더링되면 하위<Route>요소를 검색하여, 경로가 현재 URL과 일치하는 요소를 찾는다. -
<Switch>태그는<Route>나<Redirect>요소들 중 일치하는 URL을 렌더링해준다. -
<Switch>로 감싸고 있기 때문에<Route>가 중복되는 것이 있으면, "첫번째 요소만 렌더링"하고, 나머지 요소는 모두 무시한다. -
따라서, 더 구체적인 (일반적으로 더 긴) 경로가있는
<Route>를 앞에 배치하고, 뒤에 덜 구체적인 경로를 배치해야 한다. -
일치하는 가 없으면
<Switch>는 아무것도 렌더링하지 않는다. -
그러나,
<Switch>를 사용하지 않으면, 매칭되는 모두를 렌더링한다. -
<Route>태그의path는 매칭을 기다리는 url이며, 매칭되면 컴포넌트를 렌더링한다. -
path = "/"인 경로는 항상 일치한다. (모든 url이 "/" 로 시작하기 때문) -
따라서,
Route path = "/"는 일반적으로 마지막에 위치한다. -
? Switch 는 Route 에 exact를 사용하지 않고도 같은 효과를 낸다.
<Route path="/contact/:id">
<Contact />
</Route>
<Route path="/contact">
<AllContacts />
</Route>
<Route path="/">
<Home />
</Route>3.
<Link>,<NavLink>,<Redirect>: 경로 변경 (네비게이션)
-
링크를 생성하기위한
<Link>컴포넌트를 제공한다. -
<Link>를 렌더링 할 때마다 앵커 (<a>)가 HTML 문서에 렌더링된다. -
to 속성에 설정된 링크로 이동한다.
<Link to="/"> Home </Link>
= <a href="/"> Home </a>- 강제 탐색이 필요하다면,
<Redirect>을 렌더링 할 수 있다. <Redirect>가 렌더링되면 to prop을 사용하여 탐색한다.
<Redirect to="/login" /> 
delilah's journey