react-router-dom

Router: 네트워크에서 데이터의 전달을 촉진하는 중계 장치

Route: 길(경로/루트), 노선

 

Route에게 자식이 있을 경우 "/"는 기본적으로 "/부모"의 경로를 가지고 있다.

Link를 사용할때 반드시 "/부모"를 같이 표시해줘야 한다.

 

<BrowserRouter>

HTML5의 history API(pushState, replaceState and the popstate event)를 활용하여 UI를 업데이트

props : basename / forceRefresh / getUserConfirmation / keyLength

 

<HashRouter>

URL의 hash를 활용한 라우터입니다. 정적인(static)페이지에 적합합니다.

 

<Route>
- 요청받은 pathname(경로)에 해당하는 컴포넌트를 렌더링합니다.

<Link/>에서 전달한 pathname을 <Route/>가 받는다. (receiver)

<Link/>에서 전달한 pathname과 <Route/>가 일치할 경우 render한다.

 

- <Route/>의 render methods

<Route component={ }>
<Route render={ }>
<Route children> function

 

- <Route/>로 설정한 component는 3가지의 props를 전달받는다.

history : 이 객체를 통해 push, replay를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있다.

location : 이 객체는 현재 경로에 대한 정보를 지니고 있다.

match : 이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있다.

 

- URL의 params의 설정방법 :

1 Route에서 "path"부분에  "/:이름"의 형태로 params 설정

2. Route에서 render 매소드로 불러온 componenet에 params을 전달

3. component에서 "match.params.이름"의 형태로 params를 불러온다. { }에 넣어서. (class형 컴포넌트에서는 "this.props.match.이름")

 

<Switch>

path의 충돌이 일어나지 않게 <Route>들을 관리합니다.
<Swtich> 내부에 <Route>들을 넣으면
요청에 의해 매칭되는 <Route>들이 다수 있을 때에 제일 처음 매칭되는 <Route>만 선별하여 실행하기 때문에 충돌 오류를 방지해주며, <Route>간에 이동 시 발생할 수 있는 충돌도 막아줍니다.
path와 매칭되는 <Route>가 없을 때에 맨 밑에 default <Route>의 실행이 보장됩니다.(path 속성을 명시하지 않은<Route>)