redux-history?

react-router-dom이 route, provider를 사용해 원하는 페이지로 이동을 구현하였다면 redux-history는 props로 전달받는 객체이다.

history는 push(), goBack(), goForward() 등 다양한 메서드와 객체들이 존재함으로 쓰는게 좋다.

예시 코드

client/src/App.js

import React from "react";
import { Provider } from "react-redux";
// provider -> store랑 연결해주는거
import { ConnectedRouter } from "connected-react-router";
import store, { history } from "./store";
import Router from "./routes/Router";

function App() {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history} >
        <Router />
      </ConnectedRouter>
    </Provider>
  );
}

client/src/store.js

import { createBrowserHistory } from "history"; 

export const history = createBrowserHistory();
const middlewares = [sagaMiddleware, routerMiddleware(history)];

client/src/reducers/index.js

import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
import authReducer from "./authReducer";

const createRootReducer = (history) =>
  combineReducers({
    router: connectRouter(history),
    auth: authReducer,
  });