Проблема с реализацией ConnectedRouter с обновлением реакции-маршрутизатора v4

Question

Я обновился, чтобы использовать response-router v4 (rr-v4) и прочитал, что response-router-redux устарел и для rr-v4 использовать подключенный реагирующий маршрутизатор. При этом я теперь получаю следующую ошибку:

Опора location помечен как требуется в ConnectedRouter, но его значение undefined,

Я не могу понять, что я сделал неправильно. У меня довольно много кода, поэтому я попытаюсь поделиться тем, что актуально:

rootReducer:
import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router'
import { reducer as oidcReducer } from 'redux-oidc';
...
const rootReducer = (history) => combineReducers({
    routing: connectRouter(history),
    oidc: oidcReducer,
...
export default rootReducer;

store.js:
import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'connected-react-router'
import { createBrowserHistory } from 'history'
...
export const history = createBrowserHistory()

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const initialState = {};

const createStoreWithMiddleware = composeEnhancers(
    applyMiddleware(loggerMiddleware, routerMiddleware(history), thunkMiddleware)
)(createStore);

const store = createStoreWithMiddleware(rootReducer(history), initialState);
...
export default store;

index.js:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { OidcProvider } from 'redux-oidc';
import store, { history } from './store';
import { App } from './App';
import userManager from './_helpers/userManager';
import { ErrorBoundary } from './_components/ErrorBoundary';
import "./web.config";

render(
    <ErrorBoundary>
      <Provider store={store}>
        <OidcProvider store={store} userManager={userManager}>
          <App history={history} />
        </OidcProvider>
      </Provider>
    </ErrorBoundary>,
    document.getElementById('app')
);

App.js:
import React from 'react';
import { ConnectedRouter } from 'connected-react-router'
import { Route, Switch } from 'react-router-dom';
...
class App extends React.Component {
    constructor(props) {
        super(props);

        const { dispatch } = this.props;
    }
...

    render() {
        const { history } = this.props;
        return (
                <ConnectedRouter history={history}>
                    <div>
                        <Route path="/" render={() => (<div>HOME</div>)} />
                        <Route path="/test" render={() => (<div>TEST</div>)} />
                    </div>
                </ConnectedRouter>
        );
    }
}

Answer 1

Ключ под вашим rootReducer должен быть routerне routing,