Issue implementing ConnectedRouter with react-router v4 upgrade - reactjs

Question

I upgraded to use react-router v4 (rr-v4) and read that react-router-redux has been deprecated and for rr-v4 to use connected-react-router. In doing so I now get the following error:
The prop location is marked as required in ConnectedRouter, but
its value is undefined.
I can't seem to figure out what I've done wrong. I have quite a bit of code so I'm going to try and share what is relevant:
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

The key under your rootReducer must be router, not routing.