createBrowserHistory

BrowserRouter 는 history 객체를 자동으로 생성하고,

컴포넌트 단위로 history 객체를 컨트롤하기 때문에 커스텀 작업이 어렵다.

 

컴포넌트 바깥에서 history 객체를 컨트롤하기 위해서는 BrowserRouter 대신 Router를 사용하고,

BrowserHistory 를 별도 생성하여 관리해야 한다.

 

history 객체는 history 모듈에서 createBrowserHistory로 받아 올 수 있다.

 

import { createBrowserHistory } from 'history';

const history = createBrowserHistory(); // 히스토리 객체 반환
const store = configureStore(history);

 

이렇게 작성해주는 방법과

따로 utils 폴더에 history.js 파일에 분리하여 작성하여 history 파일을 import 해오고 Router에 history를 props로 전달한다.

그러면 각 컴포넌트는 history, location, math 객체를 props로부터 제공받아 사용가능 하다.

 

import { createBrowserHistory } from "history";

export default createBrowserHistory();

 

 

이 글에서 작성한 코드는 내가 참고하고 싶은 부분만 작성한거라 

자세한 코드와 설명은 참고사이트를 참고하면 된다.

---

참고사이트

 

https://velog.io/@yoonvelog/Redux-thunk-%EC%97%90%EC%84%9C-history

react-router 및 history