Не работает connected-react-router

store.ts

import { createStore, compose, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from 'sagas';
import rootReducer from 'reducers';
import { history } from 'common/helpers/historyHelper';
import { routerMiddleware } from 'connected-react-router';

declare global {
  interface Window { // eslint-disable-line
    __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose; // eslint-disable-line
  }
}
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const sagaMiddleware = createSagaMiddleware();

export const store = createStore(
  rootReducer(),
  composeEnhancers(applyMiddleware(sagaMiddleware, routerMiddleware(history)))
);

sagaMiddleware.run(rootSaga);

rootReducer.ts

import { history } from 'common/helpers/historyHelper';
import { combineReducers } from 'redux';
import user from 'scenes/Auth/reducers/user';
import { connectRouter } from 'connected-react-router';

const rootReducer = () => combineReducers({
  router: connectRouter(history),
  user
});

export default rootReducer;

rootSaga.ts

import authSaga from 'scenes/Auth/sagas';
import { all } from 'redux-saga/effects';

export default function* rootSaga() {
  yield all([
    authSaga()
  ]);
}

historyHelper.ts

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

App.tsx

import React from 'react';
import { Provider } from 'react-redux';
import { store } from '../../store';
import { Page } from 'containers/Page';
import { history } from 'common/helpers/historyHelper';
import { ConnectedRouter } from 'connected-react-router';

const App = () => (
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Page />
    </ConnectedRouter>
  </Provider>
);

export default App;

Когда перехожу по ссылкам, то роит в браузере меняется, в Redux-devtools тоже меняется Redux-devtools image, но компоненты не переключаются и я вижу такую ошибку в консоле браузера Error image.


Ответы (0 шт):