[React] 11 - react-router-dom

jungeundelilahLEE·2021년 3월 1일
0

React

목록 보기
17/24

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>

  • 링크를 생성하기위한 <Link> 컴포넌트를 제공한다.

  • <Link>를 렌더링 할 때마다 앵커 (<a>)가 HTML 문서에 렌더링된다.

  • to 속성에 설정된 링크로 이동한다.

<Link to="/"> Home </Link>
= <a href="/"> Home </a>
  • 강제 탐색이 필요하다면, <Redirect>을 렌더링 할 수 있다.
  • <Redirect>가 렌더링되면 to prop을 사용하여 탐색한다.
<Redirect to="/login" />  
profile
delilah's journey

0개의 댓글