chore: replace react-router-redux with connected-react-router (#4001)

packages/netlify-cms-core/package.json

@@ -29,6 +29,7 @@
     "ajv": "^6.10.0",
     "ajv-errors": "^1.0.1",
     "ajv-keywords": "^3.4.1",
+    "connected-react-router": "^6.8.0",
     "copy-text-to-clipboard": "^2.0.0",
     "diacritics": "^1.3.0",
     "fuzzy": "^0.1.1",
@@ -50,9 +51,8 @@
     "react-is": "16.13.1",
     "react-modal": "^3.8.1",
     "react-polyglot": "^0.7.0",
-    "react-redux": "^5.1.1",
+    "react-redux": "^7.2.0",
     "react-router-dom": "^4.2.2",
-    "react-router-redux": "^5.0.0-alpha.8",
     "react-scroll-sync": "^0.6.0",
     "react-sortable-hoc": "^1.0.0",
     "react-split-pane": "^0.1.85",
@@ -60,7 +60,7 @@
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-waypoint": "^8.1.0",
     "react-window": "^1.8.5",
-    "redux": "^4.0.1",
+    "redux": "^4.0.5",
     "redux-notifications": "^4.0.1",
     "redux-optimist": "^1.0.0",
     "redux-thunk": "^2.3.0",

packages/netlify-cms-core/src/bootstrap.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Provider, connect } from 'react-redux';
 import { Route } from 'react-router-dom';
-import { ConnectedRouter } from 'react-router-redux';
+import { ConnectedRouter } from 'connected-react-router';
 import history from 'Routing/history';
 import store from 'ReduxStore';
 import { mergeConfig } from 'Actions/config';

packages/netlify-cms-core/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap

@@ -66,7 +66,8 @@ exports[`NestedCollection should render connected component 1`] = `
 }
 
 <a
-    class="emotion-6 emotion-7"
+    aria-current="page"
+    class="emotion-6 emotion-7 sidebar-active"
     data-testid="/"
     depth="0"
     href="/collections/pages"

packages/netlify-cms-core/src/reducers/combinedReducer.js

@@ -1,13 +1,17 @@
 import { combineReducers } from 'redux';
-import { routerReducer } from 'react-router-redux';
+import { connectRouter } from 'connected-react-router';
 import { reducer as notifReducer } from 'redux-notifications';
 import optimist from 'redux-optimist';
 import reducers from './index';
 
-export default optimist(
-  combineReducers({
-    ...reducers,
-    notifs: notifReducer,
-    routing: routerReducer,
-  }),
-);
+const createRootReducer = history => {
+  return optimist(
+    combineReducers({
+      ...reducers,
+      notifs: notifReducer,
+      router: connectRouter(history),
+    }),
+  );
+};
+
+export default createRootReducer;

packages/netlify-cms-core/src/redux/index.ts

@@ -1,7 +1,9 @@
 import { createStore, applyMiddleware, compose, AnyAction } from 'redux';
 import thunkMiddleware, { ThunkMiddleware } from 'redux-thunk';
+import { routerMiddleware } from 'connected-react-router';
 import { waitUntilAction } from './middleware/waitUntilAction';
-import reducer from '../reducers/combinedReducer';
+import createRootReducer from '../reducers/combinedReducer';
+import history from '../routing/history';
 import { State } from '../types/redux';
 
 declare global {
@@ -12,9 +14,13 @@ declare global {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const store = createStore<State, any, {}, {}>(
-  reducer,
+  createRootReducer(history),
   compose(
-    applyMiddleware(thunkMiddleware as ThunkMiddleware<State, AnyAction>, waitUntilAction),
+    applyMiddleware(
+      routerMiddleware(history),
+      thunkMiddleware as ThunkMiddleware<State, AnyAction>,
+      waitUntilAction,
+    ),
     window.__REDUX_DEVTOOLS_EXTENSION__
       ? window.__REDUX_DEVTOOLS_EXTENSION__()
       : (f: Function): Function => f,