React Router :: 라우터 history, withRouter HoC

history 객체

라우트로 사용된 컴포넌트에게 match, location 과 함께 전달되는 props 중 하나이다.

이 객체를 통하여, 우리가 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근을 할 수 있다

ex. 뒤로가기, 홈으로 이동, 특정 경로로 이동, 이탈 방지 등..

 

 

○ 뒤로가기

 

history.goBack();

 

한단계전으로 이동

 

 

○ 특정 경로로 이동

 

history.push('/경로');

 

'경로'부분에 이동하고자 하는 경로를 /를 포함하여 써주면 된다.

 

+홈으로 이동

 

history.push('/');

 

 

○ 이탈 방지

 

history.block();

 

useEffect를 함께 사용하여 .block을 걸어주면 버튼을 눌러도 페이지가 이동되지 않는다.

 

history.block('문구');

 

단, block안에 문구를 적어주면 confirm창이 떠 확인 후 페이지를 이동할 수 있다.

* history.goBack()의 경우 .block이 먹히지 않는 듯 하다!

 

예시) HistorySample.js

import React, { useEffect } from 'react';

const HistorySample = ({ history }) => {
  const goBack = () => {
    history.goBack();
  }
  const goHome = () => {
    history.push('/');
  }
  useEffect(() => {
    console.log(history);
    const unblock = history.block('이동하시겠습니까?');
    return () => {
      unblock();
    }
  }, [history]);

  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <button onClick={goHome}>홈으로</button>
    </div>
  )
}

export default HistorySample;

 

App.js

* 라우터로 사용하여 props를 전달받아 사용되기 때문에 App.js에서 렌더링할때 Router로 렌더링을 해주어야한다!

<Route path="/history" component={HistorySample} />

 

 

withRouter HoC

( *HoC 고차컴포넌트 : 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 )

 

withRouter HoC는 라우트 컴포넌트가 아닌 곳에서 match / location / history를 사용해야 할 때 사용한다.

 

WithRouterSample.js

import React from 'react';
import { withRouter } from 'react-router-dom';
const WithRouterSample = ({ location, match, history }) => {
  return (
      ....
  );
};

export default withRouter(WithRouterSample);

 

App.js

위 history만 사용하던 예제와는 달리 그냥 컴포넌트만 렌더링해도된다!

<WithRouterSample />

 

단, 자신의 부모 컴포넌트 기준의 match 값이 전달되어 match안에 있는 params에는 아무것도 찍히지 않는다.

WithRouterSample 은 Profiles 에서 렌더링 되었고, 해당 컴포넌트는 /profile 규칙에 일치하기 때문에 이러한 결과가 나타났습니다.....라고..어쩌고저쩌고....

 

---

https://react.vlpt.us/react-router/04-extra.html