RRD - Route APIs

<Route>

- 정의 : location이 route의 path와 일치하면 렌더링하는 요소

 

- path

• 현재 위치의 pathname입니다. 일치하면 해당하는 컨텐츠를 렌더링하고, 맞지 않으면 null을 렌더링합니다.
• 하나의 컴포넌트에 여러개의 path를 연결하려면 배열로 값을 넘겨주면 됩니다.(리액트라우터v5이상~)
• path가 없으면 항상 일치합니다.

<Route path="/users/:id" component={User} />
<Route path={["/users/:id", "/profile/:id"]} component={User} />

- exact

• true이면 location.pathname과 정확히 일치해야만 인정합니다.

<Route exact path="/one" component={About} />

- strict

• true면, 슬래시가 있는 경로는 슬래시가 있는 location.pathname과 일치해야만 인정합니다.
• location에 추가 url 세그먼트가 있는 경우에는 동작하지 않습니다.

<Route strict path="/one/" component={About} />

- sensitive

• true면, 대소문자를 구별합니다.

<Route sensitive path="/one" component={About} />

 

- route가 컴포넌트를 렌더링하는 방법은 3가지가 있습니다. 하나의 route에 하나의 방법만 사용 가능합니다.

1) component={ComponentName}

• route의 props로 path가 일치할 때 리액트 컴포넌트를 렌더링한다.
• 당신이 렌더링하길 원하는 컴포넌트를 이미 가지고 있을 때 사용. 
• component에 인라인 함수를 제공하면 기존 컴포넌트를 업데이트하지 않고 unmount한 뒤, mount함. 인라인 함수로 제공하려면 다른 것을 사용.

<Route path="/user/:username" component={User} />;

//All route props (match, location and history) are available to User
function User(props) {
  return <h1>Hello {props.match.params.username}!</h1>;
}

2) render={() => {}}

• route의 props로 path가 일치 할 때 인라인 함수를 렌더링한다.
• 컴포넌트에 공통적으로 무언가를 랩핑할 때 사용해도 좋음.
• route component가 route render보다 우선하므로 동일한 route에서 둘 다 사용하면 안된다.

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>

// wrapping/composing
// You can spread routeProps to make them available to your rendered Component
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={routeProps => (
    <FadeIn>
      <Component {...routeProps}/>
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something}/>

3) children 

• 경로가 location과 일치하는지 여부가 필요할 때가 있다.
• 일치 여부와 관계없이 호출된다는 점을 제외하고는 렌더되는 것은 똑같다.
• route component, route rendr가 children보다 우선한다.

<ul>
  <ListItemLink to="/somewhere" />
  <ListItemLink to="/somewhere-else" />
</ul>;

const ListItemLink = ({ to, ...rest }) => (
  <Route
    path={to}
    children={({ match }) => (
      <li className={match ? "active" : ""}>
        <Link to={to} {...rest} />
      </li>
    )}
  />
);
<Route children={({ match, ...rest }) => (
  {/* Animate will always render, so you can use lifecycles
      to animate its child in and out */}
  <Animate>
    {match && <Something {...rest}/>}
  </Animate>
)}/>

- route props는 3가지 입니다.

1) match

• url과 맞는 Route path에 대한 정보
• params(object) - path의 동적 세그먼트에 해당하는 url에서 구문 분석된 키/값 쌍
• isExact(boolean) - url 전체가 맞을 경우 true
• path(string) - path와 일치하는 부분. 중첩된 <Route>를 만드는데 유용
• url - url에서 일치하는 부분. 중첩된 <Link>를 만드는데 유용

2) location

• 앱의 현재 위치, 원하는 위치, 위치를 나타냄
• history객체에도 location이 있지만 변경 가능하므로 history.location은 사용하지 말 것.

3) history

• 다양한 환경에서 자바스크립트 history 세션을 관리하는 다양한 방법을 제공합니다.
• browser history : html5 history api를 지원하는 웹 브라우저에서 유용한 DOM의 특정 구현
• length(number) - history stack 항목 전체 수
• action(string) - 현재 action 상태
• push(path, [state]) (function) - history stack으로 새 항목을 push
• replace(path, [state]) (function) - history stack에서 현재 항목을 바꿈
• go(n) (function) - history stack에서 포인터를 개의 항목만큼 이동
• goBack() (function) - go(-1)
• goForward() (function) - go(1)
• block(prompt) (function) - navigation 막음

 

<switch>

- 정의 : location과 일치하는 첫번쨰 자식(<Route>, <Redirect>)를 렌더링하는 것

- route를 꼭 switch로 그룹핑할 필요는 없으나 꽤 유용함.

• 여러 경로의 경로가 동일한 경로 이름과 일치하는 경우
• 경로 간 전환에 애니메이션을 적용할 때
• 현재 위치와 일치하는 경로가 없는 경우를 식별할 때