Merge pull request #106 from openedx/Ali-Abbas/react-router-upgrade

feat: upgrade react router to v6

package.json

@@ -28,9 +28,9 @@
   "dependencies": {
     "@cospired/i18n-iso-languages": "^2.0.2",
     "@edx/brand": "npm:@edx/brand-openedx@^1.1.0",
-    "@edx/frontend-component-footer": "^12.1.0",
-    "@edx/frontend-component-header": "^4.3.0",
-    "@edx/frontend-platform": "^4.6.0",
+    "@edx/frontend-component-footer": "^12.2.0",
+    "@edx/frontend-component-header": "^4.6.0",
+    "@edx/frontend-platform": "^5.0.0",
     "@edx/paragon": "^20.32.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
     "@fortawesome/free-brands-svg-icons": "^5.7.2",
@@ -39,7 +39,6 @@
     "@fortawesome/react-fontawesome": "^0.1.4",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
-    "connected-react-router": "^6.9.0",
     "email-prop-type": "^1.1.5",
     "font-awesome": "^4.7.0",
     "form-urlencoded": "^3.0.0",
@@ -57,8 +56,8 @@
     "react-dom": "^17.0.2",
     "react-intl": "^5.25.0",
     "react-redux": "^7.2.9",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^5.2.0",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
     "react-transition-group": "^2.5.3",
     "redux": "^4.0.1",
     "redux-devtools-extension": "^2.13.2",

src/App.jsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { ConnectedRouter } from 'connected-react-router';
-import PropTypes from 'prop-types';
 import SiteHeader from '@edx/frontend-component-header';
 import SiteFooter from '@edx/frontend-component-footer';
 
@@ -16,14 +14,8 @@ const PageContent = () => (
   </div>
 );
 
-const App = ({ history }) => (
-  <ConnectedRouter history={history}>
-    <PageContent />
-  </ConnectedRouter>
+const App = () => (
+  <PageContent />
 );
 
-App.propTypes = {
-  history: PropTypes.object.isRequired, // eslint-disable-line
-};
-
 export default App;

src/index.jsx

@@ -18,11 +18,11 @@ import './index.scss';
 import App from './App';
 
 subscribe(APP_READY, () => {
-  const { store, history } = configureStore(process.env.NODE_ENV);
+  const { store } = configureStore(process.env.NODE_ENV);
 
   ReactDOM.render(
     <AppProvider store={store}>
-      <App history={history} />
+      <App />
     </AppProvider>,
     document.getElementById('root'),
   );

src/reducers.js

@@ -1,5 +1,4 @@
 import { combineReducers } from 'redux';
-import { connectRouter } from 'connected-react-router';
 import {
   reducer as consoleReducer,
   storeName as consoleStoreName,
@@ -10,10 +9,9 @@ import {
   storeName as reportStoreName,
 } from './report';
 
-const createRootReducer = history => combineReducers({
+const createRootReducer = () => combineReducers({
   [consoleStoreName]: consoleReducer,
   [reportStoreName]: reportReducer,
-  router: connectRouter(history),
 });
 
 export default createRootReducer;

src/store/configureStore.dev.js

@@ -1,28 +1,24 @@
 import { applyMiddleware, createStore } from 'redux';
 import createSagaMiddleware from 'redux-saga';
 import thunkMiddleware from 'redux-thunk';
-import { createBrowserHistory } from 'history';
-import { routerMiddleware } from 'connected-react-router';
 import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';
 import { createLogger } from 'redux-logger';
 
 import createRootReducer from '../reducers';
 import rootSaga from '../sagas';
 
 export default function configureStore() {
-  const history = createBrowserHistory();
-
   const loggerMiddleware = createLogger({
     collapsed: true,
   });
   const sagaMiddleware = createSagaMiddleware();
 
   const store = createStore(
-    createRootReducer(history),
-    composeWithDevTools(applyMiddleware(thunkMiddleware, sagaMiddleware, routerMiddleware(history), loggerMiddleware)), // eslint-disable-line
+    createRootReducer(),
+    composeWithDevTools(applyMiddleware(thunkMiddleware, sagaMiddleware, loggerMiddleware)), // eslint-disable-line
   );
 
   sagaMiddleware.run(rootSaga);
 
-  return { store, history };
+  return { store };
 }

src/store/configureStore.prod.js

@@ -1,23 +1,19 @@
 import { applyMiddleware, createStore, compose } from 'redux';
 import createSagaMiddleware from 'redux-saga';
 import thunkMiddleware from 'redux-thunk';
-import { createBrowserHistory } from 'history';
-import { routerMiddleware } from 'connected-react-router';
 
 import createRootReducer from '../reducers';
 import rootSaga from '../sagas';
 
 export default function configureStore() {
-  const history = createBrowserHistory();
-
   const sagaMiddleware = createSagaMiddleware();
 
   const store = createStore(
-    createRootReducer(history),
-    compose(applyMiddleware(thunkMiddleware, sagaMiddleware, routerMiddleware(history))),
+    createRootReducer(),
+    compose(applyMiddleware(thunkMiddleware, sagaMiddleware)),
   );
 
   sagaMiddleware.run(rootSaga);
 
-  return { store, history };
+  return { store };
 }