https://reactrouter.com/web/api/Link

Link

• to

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

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

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

• replace

  replace prop을 boolean값으로 주면 history stack에 location 객체를 올리는 게 아니라, stack 최상단의 entry를 교체한다.

<Link to="/courses" replace />

• component

  custom navigation component를 사용자화하고 싶을 경우 사용하는 prop이다.

const FancyLink = React.forwardRef((props, ref) => (
  <a ref={ref} {...props}>💅 {props.children}</a>
))

<Link to="/" component={FancyLink} />

• a태그에 전달할 수 있는 prop들

  ex : title, id, className 등

https://reactrouter.com/web/api/NavLink

NavLink

현재 URL과 match되었을 때 스타일링이 되도록 커스텀한 Link컴포넌트이다.

• activeClassName

  activeClassName prop을 명시해주지 않을 경우 default로 "active"가 className으로 할당된다.

<NavLink to="/faq" activeClassName="selected">
  FAQs
</NavLink>

• activeStyle

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: "bold",
    color: "red"
  }}
>
  FAQs
</NavLink>

• exact

  exact 값이 true라면, to 경로와 현재 URL이 정확히 일치할 때만 스타일링이 적용된다.

• strict

  strict값이 true라면, 경로 끝에 붙는 '/'도 match판별 여부에 영향을 주게 된다.

• isActive

스타일링을 적용함에 있어서 단순히 경로의 일치 여부를 판별하는 것 이상의 조건을 주고 싶다면 사용한다.

<NavLink
  to="/events/123"
  isActive={(match, location) => {
    if (!match) {
      return false;
    }

    // only consider an event active if its event id is an odd number
    const eventID = parseInt(match.params.eventID);
    return !isNaN(eventID) && eventID % 2 === 1;
  }}
>
  Event 123
</NavLink>

• location

  위의 isActive의 인자로 전달되는 location은 일반적으로는 현재 URL의 location이나, 만약 다른 location과의 비교를 원한다면 location prop을 전달하면 된다.

• aria-current

  활성화된 link에 적용되는 속성이다.(웹 접근성과 관련된 것 같다)

  • page

    현재 'page'와 일치함을 시각적으로 강조하는 링크

  • step

    현재 '단계'와 일치함을 시각적으로 강조하는 링크

  • location

    플로우 차트에서 현재 '위치'와 일치함을 시각적으로 강조한 이미지

  • date

    달력에서 현재 '날짜'와 일치하는 날짜

  • time

    시간표에서 현재 '시간'과 일치하는 시간

  • true || false

    상기의 맥락(page~time)이 적절하지 않은 맥락에 한하여 사용하는 속성으로, true값이면 항목이 현재 맥락과 일치한다는 의미이고, false는 반대의 의미이다(false가 default값이다)

https://reactrouter.com/core/api/Redirect

Redirect

Redirect를 통해서 이동하는 location은 history stack 최상단의 현재 location을 덮어쓴다.(서버 사이드 리다이렉트와 유사 : 3xx)

• to

// string
<Redirect to="/somewhere/else" />

//object
<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

• push

  redirect는 기본적으로 history stack의 최상단 entry를 replace하는데, push prop을 true로 전달할 경우 history stack에 push하는 방식으로 동작한다.

• from

  Redirect 컴포넌트를 Switch컴포넌트 내부에서 사용할 때 필요한 prop으로 to prop에 전달한 URL 파라미터를 모두 포함해야만 한다.(그 외의 파라미터는 무시된다)

<Switch>
  <Redirect from="/old-path" to="/new-path" />
  <Route path="/new-path">
    <Place />
  </Route>
</Switch>

// Redirect with matched parameters
<Switch>
  <Redirect from="/users/:id" to="/users/profile/:id" />
  <Route path="/users/profile/:id">
    <Profile />
  </Route>
</Switch>

• exact, strict, sensitive

  Route의 prop들과 동일하다.