BrowserRoute, Switch, Route의 역할 (react-route-dom)

들어가기

`react-route-dom`의 주요 컴포넌트를 자세히 알아보자!

---

리액트 라우터에는 3개 주요 컴포넌트가 있습니다.:

1. 라우터 컴포넌트
2. 라우트 일치 컴포넌트
3. 네비게이션 컴포넌트

그리고 리액트 라우터를 시작하려면, 이 순서를 지켜주어야 합니다.:
라우트 컴포넌트(루트) > 라우트 일치 > 네비게이션

라우트 컴포넌트

라우트의 핵심구성 요소로 <BrowserRouter>이랑 <HashRouter>가 있는데, 차이점은 URL 방식과 서버를 통신하느냐의 차이입니다.

• BrowserRouter: 일반 URL 경로를 사용하며 해당 경로마다 서버를 올바르게 구성해줘야합니다.
• HashRouter: URL의 해시 부분에 현재위치를 저장합니다. 서버로 전송되지 않아서 서버 구성이 필요하지 않습니다.

라우터를 이용하려면 최상위 레벨(=루트)에서 최상위 요소를 래핑해줘야합니다.:

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

render(<BrowserRouter><App /></BrowserRouter>, document.querySelector('#app'));

라우트 일치 컴포넌트

<Switch>

자식인 <Route>컴포넌트를 검색해서 현재 URL과 일치하는 컴포넌트를 찾는다.
하나를 찾으면 그것만 렌더링하고 나머지 라우트 컴포넌트는 모두 무시한다.
일치하는 컴포넌트를 찾지 못하면 null을 반환하면서 아무것도 렌더링하지 않는다.

<Route>

Route path가 URL 시작 부분과 일치하는 것이 아니라 전체가 일치한다는 점을 중요하게 생각해야합니다.
그래서 <Route path="/"/>의 경우 항상 URL과 일치하기 때문에 <Switch>에서 마지막에 넣거나, exact를 사용하여 <Route exact path="/"> 처리해줍니다.

네비게이션 컴포넌트

<Link>

리액트 라우터는 앱의 링크를 생성하기 위해 <Link>컴포넌트를 제공해주고있습니다.
<Link>를 렌더링할 때마다 HTML문서에 앵커(=<a>)가 렌더링됩니다.

<NavLink>

현재 페이지 위치와 일치할 경우 active로 스타일링을 줄 수 있도록 해주는 특수한 유형의 <Link>입니다.

<NavLink to="/react" activeClassName="active">
    React
</NavLink>

//=> <a href="/react" className="active">React</a>

<Redirect>

강제 탐색을할 수 있게 해주는 컴포넌트로 렌더링되면 to prop을 사용해 탐색합니다.

<Redirect to="login" />

 

 

해당 문서는 리액트 라우터의 Primary Components 페이지를 한글로 번역하였습니다.