RRD - Navigation APIs

<Link>

application에 선언적이고 접근 가능한 탐색 기능 제공

페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경.

 

1) to

• :string - 위치의 pathname, search, hash properties를 string으로 연결

<Link to="/courses?sort=name" />

• :object - 다음 속성 중 하나를 가지고 있는 객체
  • pathname: 현재 path
  • search: 쿼리 파라미터 표현(?...)
  • hash: 해시 파라미터 표현(#...)
  • state: location의 지속되는 상태

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

• :function - location이 파라미터로 전달되고 location 표현을 문자열 또는 객체로 리턴하는 함수

<Link to={location => ({ ...location, pathname: "/courses" })} />
<Link to={location => `${location.pathname}?sort=name`} />

 

2) replace

true인 경우 링크를 클릭하면 새 항목을 추가하는 것이 아니라 history stack의 현재 값이 바뀝니다.

(replace 전 페이지는 history 기록이 안남겠죠)

<Link to="/courses" replace />

 

3) etc

<a>태그에서 쓰는 속성들 사용 가능

 

<NavLink>

Link의 특별한 버전

1) activeClassNAme: string

2) activeStyle: object

3) exact:bool - true이면, location이 정확히 일치할 때만 활성 클래스/스타일 적용

4) strict:bool - true이면, 뒤에 슬래시까지 일치할 때 url 일치 여부 판명. route strict와 동일

5) isActive:func - 링크의 활성화 여부가 location 일치 외에 추가 로직이 필요할 때 사용.

// only consider an event active if its event id is an odd number
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>