결국 React Router에서 전환 대상으로 보낸 값을 받으려면 useLocation ()이 가장 좋습니다.

하고 싶은 일

React Router를 사용할 때 전환 대상에 값을 보내고 싶습니다.

<li>
  <Link to={{pathname: "/users/mypage/recommends", state: {books: this.state.books}}}>
    推薦図書一覧
  </Link>
</li>

공식을 보는 한 이렇게 state라는 키를 사용하여 값을 보낼 수있는 것 같습니다.


그러나, 여기서 문제가 되는 것이 보낸 값을 천이처로 어떻게 받을까, 라고 하는 이야기.

라우팅은 다음과 같이 설정됩니다.

<Route path="/users/mypage">
  <MyPage>
    <Route exact path="/users/mypage">
      <UserInfo></UserInfo>
    </Route>
    <Route path="/users/mypage/recommends">
      <MyRecommendedBooks></MyRecommendedBooks>
    </Route>
    <Route path="/users/mypage/edit">
      <EditUserInfo></EditUserInfo>
    </Route>
  </MyPage>
</Route>

사이드바에 링크를 설정하여 동일 페이지 내에서 표시를 전환하는 구현을 하고 있다.

고려한 것

withRouter 사용

조사한 한 class 컴퍼넌트라면 withRouter를 사용하는 것으로 location.state.books, 와 같이 location property를 취급하는 것이
할 수 있을 것 같다.

그러나 이번은 사이드 바에서 표시의 전환을 할 뿐이므로 전부의 컴퍼넌트를 클래스 컴퍼넌트로 취급하는 것은 귀찮다.

결론 ... useLocation ()을 사용합시다.

React Hooks의 1종 useLocation을 사용하면 간단하게 함수 컴퍼넌트로 location property를 취급할 수 있다

// react-routerの読み込み
import { Link, withRouter, useLocation } from "react-router-dom";

export function MyRecommendedBooks() {
  const location = useLocation();
  if (location.state.books.length !== 0) {
    return (
      <ul>
          {location.state.books.map(book => {
            return <li key={book.isbn}>{book.title}</li> //returnがないと表示できない
          })} 
      </ul>
    )
    } else {
      return null
  }
}

이런 식으로 모듈을 import하고 함수 내에서 useLocation() 하는 것만으로 location 속성에 액세스 할 수 있었다. 굉장히 편리하다...

후에는 방금전의 링크로 정의한 state를 꺼내 뷰에 렌더링 한다.

거동

이런 식으로 사이드바의 링크를 클릭하는 동시에 뷰에 DB에서 꺼낸 값을 표시할 수 있었다

참고

React-Router 공식
h tps : // 리아 ct 로 r. 코 m / ぇ b / 아피 / ぃ k

qiita 기사
htps : // 이 m / h - 요시 카와 44 / ms / 아 78b6c7cd1에 f43549bf