React Router - History 객체를 구성 요소에 전달하는 방법

프로젝트를 진행 중이었고 한동안 React를 사용하지 않았습니다. 저는 상황을 해결해야 했습니다. 구성 요소가 있는데 이 구성 요소는 Route 구성 요소에 깊숙이 포함되어 있습니다(이 경로는 Browser Router 구성 요소 아래에 있음). 라우터 기록에서 기록 개체를 사용해야 했습니다. 나는 오래된 React Router와 상황 기록 조작으로 나의 나쁜 모험을 기억하기 시작했습니다.

그래서 공식 문서를 열었을 때 기분이 나빴습니다. 3분 만에 과제를 풀 수 있다는 사실에 큰 놀라움을 금치 못했다.

마법 같은 고차 구성 요소가 있습니다. 그 이름은 withRouter입니다. react-router-dom 패키지에서도 발생합니다. 도움을 받아 전체 기록 개체를 구성 요소에 속성으로 전달할 수 있습니다. 여기에는 라우팅에 대한 몇 가지 유용한 데이터가 포함되어 있습니다.

import React, { PureComponent } from 'react';
import { withRouter } from 'react-router-dom';

class PassToMeMyRouterHistory extends PureComponent {

  redirectToHome = () => {
   const { history } = this.props;
   if(history) history.push('/home');
  }

  render() {
    const { history } = this.props;

    return(
      (history)
      ?
        <div onClick={this.redirectToHome}>You can go to Home 🥳</div>
      :
        <div>Oh, we did not get pathname! 🤔</div>
    );
  }

}

export default withRouter(PassToMeMyRouterHistory);

위에서 볼 수 있듯이 withRouter 구성 요소가 작업을 수행하도록 한 후 기록과 관련하여 필요한 데이터 및 기능에 쉽게 도달할 수 있습니다. history 객체에는 여러 속성이 있으며 documentation 에서 확인할 수 있습니다.

추신: 위치 변경의 경우 이 작업이 필요할 때 구성 요소에서 다시 렌더링 논리를 처리해야 합니다. withRouter는 소품을 제공하지만 변경 사항을 구독하지 않습니다!