fix(deps): update react-router monorepo to v6 (major)

package.json

@@ -89,8 +89,8 @@
     "react-markdown": "^5.0.3",
     "react-picky": "^5.3.2",
     "react-redux": "^5.0.5",
-    "react-router": "^4.1.1",
-    "react-router-dom": "^4.1.1",
+    "react-router": "^6.30.1",
+    "react-router-dom": "^6.30.1",
     "react-select": "^3.0.4",
     "react-test-renderer": "^16.8.4",
     "reactstrap": "^8.0.0",

static/js/Router.js

@@ -1,30 +1,31 @@
 import React from "react"
-import { Route, Router as ReactRouter } from "react-router"
+import { BrowserRouter, Route } from "react-router-dom"
 import { Provider } from "react-redux"
 
 import App from "./containers/App"
 import withTracker from "./util/withTracker"
 import ScrollToTop from "./components/ScrollToTop"
 
+const TrackedApp = withTracker(App);
+
 export default class Root extends React.Component {
   props: {
-    history: Object,
     store: Store
   }
 
   render() {
-    const { children, history, store } = this.props
+    const { children, store } = this.props
 
     return (
       <div>
         <Provider store={store}>
-          <ReactRouter history={history}>
+          <BrowserRouter>
             <ScrollToTop>{children}</ScrollToTop>
-          </ReactRouter>
+          </BrowserRouter>
         </Provider>
       </div>
     )
   }
 }
 
-export const routes = <Route url="/" component={withTracker(App)} />
+export const routes = <Route path="/" element={<TrackedApp />} />

static/js/components/PrivateRoute.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { type ComponentType } from "react";
-import { Route, Redirect } from "react-router-dom";
+import { Route, Navigate } from "react-router-dom";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { createStructuredSelector } from "reselect";
@@ -28,7 +28,7 @@ export const PrivateRoute = ({
         return currentUser && currentUser.is_authenticated ? (
           <Component {...props} />
         ) : (
-          <Redirect to={generateLoginRedirectUrl()} />
+          <Navigate to={generateLoginRedirectUrl()} />
         );
       }}
     />

static/js/components/PrivateRoute_test.js

@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { assert } from "chai";
-import { Redirect } from "react-router-dom";
+import { Navigate } from "react-router-dom";
 
 import PrivateRoute, {
   PrivateRoute as InnerPrivateRoute,
@@ -56,7 +56,7 @@ describe("PrivateRoute component", () => {
       assert.equal(path, fakeRoutePath);
       const renderResult = render();
       if (isAnonymous) {
-        assert.equal(renderResult.type, Redirect);
+        assert.equal(renderResult.type, Navigate);
         assert.equal(
           renderResult.props.to,
           `${routes.login.begin}?next=%2Fprotected%2Froute`,

static/js/components/ScrollToTop.js

@@ -1,16 +1,12 @@
-import React from "react";
-import { withRouter } from "react-router";
+import React, { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
-class ScrollToTop extends React.Component {
-  componentDidUpdate(prevProps) {
-    if (this.props.location.pathname !== prevProps.location.pathname) {
-      window.scrollTo(0, 0);
-    }
-  }
-
-  render() {
-    return this.props.children;
-  }
+function ScrollToTop({ children }) {
+  const location = useLocation();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [location.pathname]);
+  return children;
 }
 
-export default withRouter(ScrollToTop);
+export default ScrollToTop;

static/js/containers/App.js

@@ -3,7 +3,7 @@
 import React from "react";
 import { compose } from "redux";
 import { connect } from "react-redux";
-import { Switch, Route } from "react-router";
+import { Routes, Route } from "react-router-dom";
 import { connectRequest } from "redux-query";
 import { createStructuredSelector } from "reselect";
 import urljoin from "url-join";
@@ -84,49 +84,76 @@ export class App extends React.Component<Props, void> {
           errorPageHeader={null}
           courseTopics={courseTopics}
         />
-        <Switch>
-          <PrivateRoute
-            exact
+        <Routes>
+          <Route
             path={urljoin(match.url, routes.dashboard)}
-            component={DashboardPage}
+            element={
+              <PrivateRoute>
+                <DashboardPage />
+              </PrivateRoute>
+            }
           />
-          <PrivateRoute
+          <Route
             path={urljoin(match.url, routes.receipt)}
-            component={ReceiptPage}
+            element={
+              <PrivateRoute>
+                <ReceiptPage />
+              </PrivateRoute>
+            }
           />
           <Route
             path={urljoin(match.url, String(routes.login))}
-            component={LoginPages}
+            element={<LoginPages />}
           />
           <Route
             path={urljoin(match.url, String(routes.register))}
-            component={RegisterPages}
+            element={<RegisterPages />}
           />
-          <PrivateRoute
+          <Route
             path={urljoin(match.url, routes.checkout)}
-            component={CheckoutPage}
+            element={
+              <PrivateRoute>
+                <CheckoutPage />
+              </PrivateRoute>
+            }
           />
           <Route
             path={urljoin(match.url, String(routes.ecommerceAdmin))}
-            component={EcommerceAdminPages}
+            element={
+              <PrivateRoute>
+                <EcommerceAdminPages />
+              </PrivateRoute>
+            }
           />
           <Route
             path={urljoin(match.url, String(routes.profile))}
-            component={ProfilePages}
+            element={
+              <PrivateRoute>
+                <ProfilePages />
+              </PrivateRoute>
+            }
           />
           <Route
             path={urljoin(match.url, String(routes.ecommerceBulk))}
-            component={EcommerceBulkPages}
+            element={
+              <PrivateRoute>
+                <EcommerceBulkPages />
+              </PrivateRoute>
+            }
           />
-          <PrivateRoute
+          <Route
             path={urljoin(match.url, String(routes.accountSettings))}
-            component={AccountSettingsPage}
+            element={
+              <PrivateRoute>
+                <AccountSettingsPage />
+              </PrivateRoute>
+            }
           />
           <Route
             path={urljoin(match.url, String(routes.account.confirmEmail))}
-            component={EmailConfirmPage}
+            element={<EmailConfirmPage />}
           />
-        </Switch>
+        </Routes>
       </div>
     );
   }

static/js/containers/pages/admin/EcommerceAdminPages.js

@@ -5,7 +5,7 @@ declare var USER_PERMISSIONS: {
   has_coupon_product_assignment_permission: boolean,
 };
 import React from "react";
-import { Redirect, Route, Switch, Link } from "react-router-dom";
+import { Navigate, Route, Routes, Link } from "react-router-dom";
 
 import { routes } from "../../../lib/urls";
 
@@ -50,34 +50,34 @@ const EcommerceAdminIndexPage = () => (
 
 const EcommerceAdminPages = () => (
   <React.Fragment>
-    <Switch>
+    <Routes>
       <Route
         exact
         path={routes.ecommerceAdmin.index}
-        component={EcommerceAdminIndexPage}
+        element={<EcommerceAdminIndexPage />}
       />
       <Route
         exact
-        path={routes.ecommerceAdmin.coupons}
-        component={CouponCreationPage}
+        path={routes.ecommerceAdmin.coupons.create}
+        element={<CouponCreationPage />}
       />
       <Route
         exact
-        path={routes.ecommerceAdmin.deactivate}
-        component={DeactivateCouponPage}
+        path={routes.ecommerceAdmin.coupons.deactivate}
+        element={<DeactivateCouponPage />}
       />
       <Route
         exact
-        path={routes.ecommerceAdmin.processSheets}
-        component={ProcessCouponAssignmentSheetPage}
+        path={routes.ecommerceAdmin.coupons.processAssignmentSheet}
+        element={<ProcessCouponAssignmentSheetPage />}
       />
       <Route
         exact
-        path={routes.ecommerceAdmin.updatePromoCode}
-        component={UpdatePromoCodePage}
+        path={routes.ecommerceAdmin.coupons.updatePromoCode}
+        element={<UpdatePromoCodePage />}
       />
-      <Redirect to={routes.ecommerceAdmin.index} />
-    </Switch>
+      <Navigate to={routes.ecommerceAdmin.index} />
+    </Routes>
   </React.Fragment>
 );
 

static/js/containers/pages/b2b/EcommerceBulkPages.js

@@ -1,6 +1,6 @@
 // @flow
 import React from "react";
-import { Route, Switch } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 
 import { routes } from "../../../lib/urls";
 
@@ -9,18 +9,10 @@ import B2BReceiptPage from "./B2BReceiptPage";
 
 const EcommerceBulkPages = () => (
   <React.Fragment>
-    <Switch>
-      <Route
-        exact
-        path={routes.ecommerceBulk.bulkPurchase}
-        component={B2BPurchasePage}
-      />
-      <Route
-        exact
-        path={routes.ecommerceBulk.receipt}
-        component={B2BReceiptPage}
-      />
-    </Switch>
+    <Routes>
+      <Route exact path={routes.b2b.purchase} element={<B2BPurchasePage />} />
+      <Route exact path={routes.b2b.receipt} element={<B2BReceiptPage />} />
+    </Routes>
   </React.Fragment>
 );
 

static/js/containers/pages/login/LoginPages.js

@@ -1,6 +1,6 @@
 // @flow
 import React from "react";
-import { Switch, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 
 import { routes } from "../../../lib/urls";
 
@@ -9,30 +9,27 @@ import LoginPasswordPage from "./LoginPasswordPage";
 import LoginForgotPasswordPage from "./LoginForgotPasswordPage";
 import LoginForgotPasswordConfirmPage from "./LoginForgotPasswordConfirmPage";
 
-const ForgotPasswordPages = () => (
-  <React.Fragment>
+function getForgotPasswordRoutes() {
+  return [
     <Route
-      exact
+      key="forgot-begin"
       path={routes.login.forgot.begin}
-      component={LoginForgotPasswordPage}
-    />
+      element={<LoginForgotPasswordPage />}
+    />,
     <Route
-      exact
+      key="forgot-confirm"
       path={routes.login.forgot.confirm}
-      component={LoginForgotPasswordConfirmPage}
-    />
-  </React.Fragment>
-);
+      element={<LoginForgotPasswordConfirmPage />}
+    />,
+  ];
+}
 
 const LoginPages = () => (
-  <Switch>
-    <Route exact path={routes.login.begin} component={LoginEmailPage} />
-    <Route exact path={routes.login.password} component={LoginPasswordPage} />
-    <Route
-      path={routes.login.forgot.toString()}
-      component={ForgotPasswordPages}
-    />
-  </Switch>
+  <Routes>
+    <Route path={routes.login.begin} element={<LoginEmailPage />} />
+    <Route path={routes.login.password} element={<LoginPasswordPage />} />
+    {getForgotPasswordRoutes()}
+  </Routes>
 );
 
 export default LoginPages;

static/js/containers/pages/profile/ProfilePages.js

@@ -1,17 +1,17 @@
 // @flow
 import React from "react";
-import { Switch, Route } from "react-router-dom";
+import { Routes, Route } from "react-router-dom";
 
 import { routes } from "../../../lib/urls";
 
 import ViewProfilePage from "./ViewProfilePage";
 import EditProfilePage from "./EditProfilePage";
 
 const ProfilePages = () => (
-  <Switch>
-    <Route exact path={routes.profile.view} component={ViewProfilePage} />
-    <Route exact path={routes.profile.edit} component={EditProfilePage} />
-  </Switch>
+  <Routes>
+    <Route exact path={routes.profile.view} element={<ViewProfilePage />} />
+    <Route exact path={routes.profile.edit} element={<EditProfilePage />} />
+  </Routes>
 );
 
 export default ProfilePages;