ошибка connectedRouter: не удалось найти редуктор маршрутизатора в дереве состояний, его необходимо смонтировать в разделе «маршрутизатор»

Question

Я новичок в React.js и настраивал базовый проект, при этом у меня была одна проблема, из-за которой изменилась моя маршрутизация, но компонент не загружается.После поиска в Google я обнаружил, что мне нужно использовать ConnectedRouter.При настройке ConnectedRouter я получаю сообщение об ошибке консоли: Не удалось найти редуктор маршрутизатора в дереве состояний, его необходимо смонтировать в «маршрутизаторе»

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ConnectedRouter, connectRouter, routerMiddleware } from "connected-react-router";
import { Provider } from "react-redux";
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import loginReducer from "./store/reducers/login";
import { watchLogin} from "./store/sagas";
import { history } from '../src/shared/history';
import { push } from 'react-router-redux';



import './index.css';
import App from './App';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const rootReducer = combineReducers({
    login: loginReducer
});
const routersMiddleware = routerMiddleware(history)
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, routersMiddleware];

const store = createStore(
    connectRouter(history)(rootReducer),
    {},
    composeEnhancers(applyMiddleware(...middlewares))
);

sagaMiddleware.run(watchLogin);

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

ReactDOM.render(app, document.getElementById('root'));

Answer 1

Вы забыли:

router: connectRouter(history), 

в вашем комбайнеReducers ()

Answer 2

Добавьте маршрутизатор в ваш редуктор с использованием connectRouter и history

Ссылка на эту ссылку

https://www.npmjs.com/package/connected-react-router

import { connectRouter } from 'connected-react-router'
const rootReducer = combineReducers({
  login: loginReducer,
  router: connectRouter(history),
});

Answer 3

Я столкнулся с той же проблемой. Я забыл предоставить историю в качестве параметра для моего rootReducer в инициализации моего магазина.

const store = createStore(
  rootReducer(history), // <-- HERE
  {},
  ...
)

Answer 4

Вам необходимо добавить редуктор маршрутизатора, например, так:

import { push, routerReducer } from 'react-router-redux'

const rootReducer = combineReducers({
    login: loginReducer,
    router: routerReducer
});

Я бы также предложил вам использовать другую библиотеку маршрутизации, такую ​​как реагирующий маршрутизатор с интеграцией с избыточностью или .-react-router , так как response-router-redux устарел и не обновлен до последней версии реакции-маршрутизатора.