chore: start migrating to react-router v6

commercetools · Sep 21, 2020 · 2cfe2ed · 2cfe2ed
1 parent d425962
commit 2cfe2ed
Show file tree

Hide file tree

Showing 17 changed files with 110 additions and 127 deletions.
diff --git a/application-templates/starter/package.json b/application-templates/starter/package.json
@@ -26,13 +26,14 @@
     "@commercetools-uikit/text": "10.30.1",
     "apollo-client": "2.6.10",
     "bulk-update-versions": "1.1.0",
+    "history": "5.0.0",
     "prop-types": "15.7.2",
     "react": "16.13.1",
     "react-apollo": "3.1.5",
     "react-dom": "16.13.1",
     "react-intl": "5.8.2",
     "react-redux": "7.2.1",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "6.0.0-beta.0",
     "redux": "4.0.5"
   },
   "devDependencies": {

diff --git a/application-templates/starter/src/components/entry-point/entry-point.js b/application-templates/starter/src/components/entry-point/entry-point.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import {
   ApplicationShell,
   setupGlobalErrorListener,
@@ -18,25 +18,26 @@ const AsyncApplicationRoutes = React.lazy(
 );
 
 export const ApplicationStarter = () => (
-  <Switch>
+  <Routes>
     {
       /* For development, it's useful to redirect to the actual
       application routes when you open the browser at http://localhost:3001 */
       process.env.NODE_ENV === 'production' ? null : (
+        // FIXME: the `Redirect` component does not exist anymore. We should do the
+        // redirect/navigation using a React component effect.
         <Redirect
           exact={true}
           from="/:projectKey"
           to="/:projectKey/examples-starter"
         />
       )
     }
-    <Route
-      path="/:projectKey/examples-starter"
-      component={AsyncApplicationRoutes}
-    />
+    <Route path="/:projectKey/examples-starter/*">
+      <AsyncApplicationRoutes />
+    </Route>
     {/* Catch-all route */}
     <RouteCatchAll />
-  </Switch>
+  </Routes>
 );
 ApplicationStarter.displayName = 'ApplicationStarter';
 

diff --git a/application-templates/starter/src/components/main-view/main-view.js b/application-templates/starter/src/components/main-view/main-view.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Route, Switch, Link } from 'react-router-dom';
+import { Route, Routes, Link } from 'react-router-dom';
 import { ListIcon, TableIcon } from '@commercetools-uikit/icons';
 import Text from '@commercetools-uikit/text';
 import Spacings from '@commercetools-uikit/spacings';
@@ -11,7 +10,7 @@ import ViewTwo from '../view-two';
 import messages from './messages';
 import styles from './main-view.mod.css';
 
-const MainView = (props) => {
+const MainView = () => {
   const intl = useIntl();
 
   return (
@@ -22,35 +21,26 @@ const MainView = (props) => {
           <Spacings.Inline scale="s">
             <FlatButton
               as={Link}
-              to={`${props.match.url}/one`}
+              to="one"
               icon={<ListIcon />}
               label={intl.formatMessage(messages.labelLinkOne)}
             />
             <FlatButton
               as={Link}
-              to={`${props.match.url}/two`}
+              to="two"
               icon={<TableIcon />}
               label={intl.formatMessage(messages.labelLinkTwo)}
             />
           </Spacings.Inline>
         </div>
-        <Switch>
-          <Route path={`${props.match.path}/one`} component={ViewOne} />
-          <Route path={`${props.match.path}/two`} component={ViewTwo} />
-        </Switch>
+        <Routes>
+          <Route path="one" component={ViewOne} />
+          <Route path="two" component={ViewTwo} />
+        </Routes>
       </Spacings.Stack>
     </Spacings.Inset>
   );
 };
 MainView.displayName = 'MainView';
-MainView.propTypes = {
-  match: PropTypes.shape({
-    path: PropTypes.string.isRequired,
-    url: PropTypes.string.isRequired,
-    params: PropTypes.shape({
-      projectKey: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
 
 export default MainView;
diff --git a/application-templates/starter/src/routes.js b/application-templates/starter/src/routes.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { useIsAuthorized } from '@commercetools-frontend/permissions';
 import LockedDiamondSVG from '@commercetools-frontend/assets/images/locked-diamond.svg';
 import { MaintenancePageLayout } from '@commercetools-frontend/application-components';
@@ -15,31 +14,24 @@ const PageUnauthorized = () => (
   />
 );
 
-const ApplicationRoutes = ({ match }) => {
+const ApplicationRoutes = () => {
   const canViewProducts = useIsAuthorized({
     demandedPermissions: [PERMISSIONS.ViewProducts],
   });
   if (!canViewProducts) {
     return <PageUnauthorized />;
   }
   return (
-    <Switch>
-      <Route
-        path={`${match.path}/some-other-route`}
-        render={() => <div>{'Nothing to see'}</div>}
-      />
-      <Route render={(routerProps) => <MainView match={routerProps.match} />} />
-    </Switch>
+    <Routes>
+      <Route path="some-other-route">
+        <div>{'Nothing to see'}</div>
+      </Route>
+      <Route path="*">
+        <MainView />
+      </Route>
+    </Routes>
   );
 };
 ApplicationRoutes.displayName = 'ApplicationRoutes';
-ApplicationRoutes.propTypes = {
-  match: PropTypes.shape({
-    path: PropTypes.string,
-    params: PropTypes.shape({
-      projectKey: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
 
 export default ApplicationRoutes;
diff --git a/package.json b/package.json
@@ -67,7 +67,10 @@
       "website-components-playground"
     ],
     "nohoist": [
-      "**/react-apollo"
+      "**/react-apollo",
+      "**/@commercetools-docs/gatsby-theme-docs/react-router/**",
+      "**/@commercetools-docs/gatsby-theme-docs/react-router-dom/**",
+      "**/@types/reach__router/**"
     ]
   },
   "devDependencies": {
@@ -104,8 +107,6 @@
     "@types/react": "16.9.49",
     "@types/react-dom": "16.9.8",
     "@types/react-redux": "7.1.9",
-    "@types/react-router": "5.1.8",
-    "@types/react-router-dom": "5.1.5",
     "@types/uuid": "8.3.0",
     "@types/webpack": "4.41.22",
     "@types/webpack-env": "1.15.3",
@@ -142,6 +143,7 @@
     "gatsby-plugin-emotion": "4.3.11",
     "gatsby-plugin-mdx": "1.2.40",
     "graphql-cli": "4.0.0",
+    "history": "5.0.0",
     "husky": "4.3.0",
     "jest": "26.4.2",
     "jest-each": "26.4.2",
@@ -186,7 +188,6 @@
     "@sentry/types": "5.24.2",
     "**/@sentry/types": "5.24.2",
     "@types/react": "16.9.49",
-    "@types/react-router": "5.1.8",
     "**/sharp": "0.26.1",
     "cypress": "5.2.0",
     "graphql": "14.7.0",

diff --git a/packages/application-components/src/components/page-not-found/README.md b/packages/application-components/src/components/page-not-found/README.md
@@ -7,14 +7,14 @@ The PageNotFound component can be used as a `404` or page not found route for Me
 ## Usage
 
 ```js
-import { Switch, Route } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import { PageNotFound } from '@commercetools-frontend/application-components';
 
 const Routes = () => (
-  <Switch>
-    <Route exact path="/" component={Home} />
-    <Route path="/user" component={User} />
-    <Route path="*" component={PageNotFound} />
-  </Switch>
+  <Routes>
+    <Route path="/"><Home /></Route>
+    <Route path="/user/*"><User /></Route>
+    <Route path="*"><PageNotFound /></Route>
+  </Routes>
 );
 ```
diff --git a/packages/application-components/src/components/page-unauthorized/README.md b/packages/application-components/src/components/page-unauthorized/README.md
@@ -7,14 +7,14 @@ The PageUnauthorized component can be used to inform a user that certain permiss
 ## Usage
 
 ```js
-import { Switch, Route } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { PageUnauthorized } from '@commercetools-frontend/application-components';
 
 const Routes = () => (
-  <Switch>
-    <Route exact path="/" component={Home} />
-    <Route path="/user" component={User} />
-    <Route path="/unauthorized" component={PageUnauthorized} />
-  </Switch>
+  <Routes>
+    <Route path="/"><Home /></Route>
+    <Route path="/user/*"><User /></Route>
+    <Route path="/unauthorized/*"><PageUnauthorized /></Route>
+  </Routes>
 );
 ```
diff --git a/packages/application-shell/package.json b/packages/application-shell/package.json
@@ -94,7 +94,6 @@
     "fuse.js": "6.4.1",
     "graphql": "14.7.0",
     "graphql-tag": "^2.11.0",
-    "history": "5.0.0",
     "is-retina": "1.0.3",
     "jwt-decode": "2.2.0",
     "lodash": "4.17.20",
@@ -115,13 +114,14 @@
   },
   "devDependencies": {
     "@testing-library/react": "11.0.4",
+    "history": "5.0.0",
     "msw": "0.21.2",
     "react": "16.13.1",
     "react-apollo": "3.1.5",
     "react-dom": "16.13.1",
     "react-intl": "5.8.2",
     "react-redux": "7.2.1",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "6.0.0-beta.0",
     "redux": "4.0.5",
     "wait-for-observables": "1.0.3"
   },
@@ -132,14 +132,13 @@
     "@types/react": "16.x",
     "@types/react-dom": "16.x",
     "@types/react-redux": "7.x",
-    "@types/react-router": "5.x",
-    "@types/react-router-dom": "5.x",
+    "history": "5.x",
     "react": ">=16.8.0",
     "react-apollo": "3.x",
     "react-dom": ">=16.8.0",
     "react-intl": "3.x || 4.x || 5.x",
     "react-redux": "7.x",
-    "react-router-dom": "5.x",
+    "react-router-dom": "6.x",
     "redux": "4.x"
   },
   "engines": {

diff --git a/...pplication-shell/src/components/application-shell-provider/application-shell-provider.tsx b/...pplication-shell/src/components/application-shell-provider/application-shell-provider.tsx
@@ -44,7 +44,11 @@ const ApplicationShellProvider = <AdditionalEnvironmentProperties extends {}>(
         <ReduxProvider store={internalReduxStore}>
           <ApolloProvider client={ApplicationShellProvider.apolloClient}>
             <React.Suspense fallback={<ApplicationLoader />}>
-              <Router history={ApplicationShellProvider.history}>
+              <Router
+                action={history.action}
+                location={history.location}
+                navigator={ApplicationShellProvider.history}
+              >
                 <GtmBooter trackingEventList={props.trackingEventList || {}}>
                   <Authenticated
                     render={({ isAuthenticated }) => {

diff --git a/packages/application-shell/src/components/application-shell/application-shell.tsx b/packages/application-shell/src/components/application-shell/application-shell.tsx
@@ -8,7 +8,7 @@ import type { TApplicationsMenu } from '../../types/generated/proxy';
 import type { TrackingList } from '../../utils/gtm';
 
 import React from 'react';
-import { Redirect, Route, Switch, useLocation } from 'react-router-dom';
+import { Redirect, Route, Routes, useLocation } from 'react-router-dom';
 import { Global, css } from '@emotion/core';
 import styled from '@emotion/styled';
 import {
@@ -266,7 +266,7 @@ export const RestrictedApplication = <
                         </div>
 
                         <Route>
-                          {() => {
+                          {(() => {
                             if (!projectKeyFromUrl) return <QuickAccess />;
                             return (
                               <FetchProject projectKey={projectKeyFromUrl}>
@@ -312,7 +312,7 @@ export const RestrictedApplication = <
                                 }}
                               </FetchProject>
                             );
-                          }}
+                          })()}
                         </Route>
 
                         <header
@@ -528,9 +528,11 @@ const ApplicationShell = <AdditionalEnvironmentProperties extends {}>(
         {({ isAuthenticated }) => {
           if (isAuthenticated)
             return (
-              <Switch>
-                <Route path="/logout" component={RedirectToLogout} />
-                <Route>
+              <Routes>
+                <Route path="/logout">
+                  <RedirectToLogout />
+                </Route>
+                <Route path="*">
                   <RestrictedApplication<AdditionalEnvironmentProperties>
                     defaultFeatureFlags={props.defaultFeatureFlags}
                     featureFlags={props.featureFlags}
@@ -545,23 +547,18 @@ const ApplicationShell = <AdditionalEnvironmentProperties extends {}>(
                     }
                   />
                 </Route>
-              </Switch>
+              </Routes>
             );
 
           return (
-            <Route
-              render={({ location }) => (
-                <Redirector
-                  to="login"
-                  location={location}
-                  queryParams={{
-                    reason: LOGOUT_REASONS.UNAUTHORIZED,
-                    redirectTo: trimLeadingAndTrailingSlashes(
-                      joinPaths(window.location.origin, location.pathname)
-                    ),
-                  }}
-                />
-              )}
+            <Redirector
+              to="login"
+              queryParams={{
+                reason: LOGOUT_REASONS.UNAUTHORIZED,
+                redirectTo: trimLeadingAndTrailingSlashes(
+                  joinPaths(window.location.origin, location.pathname)
+                ),
+              }}
             />
           );
         }}

diff --git a/packages/application-shell/src/components/application-shell/redirect-to-logout.tsx b/packages/application-shell/src/components/application-shell/redirect-to-logout.tsx
@@ -1,20 +1,20 @@
-import type { RouteProps } from 'react-router-dom';
-
 import React from 'react';
+import { useLocation } from 'react-router-dom';
 import { LOGOUT_REASONS } from '@commercetools-frontend/constants';
 import { useApplicationContext } from '@commercetools-frontend/application-shell-connectors';
 import Redirector from '../redirector';
 
 // When the application redirects to this route, we always force a hard redirect
 // to the logout route of the authentication service.
-const RedirectToLogout = (props: RouteProps) => {
+const RedirectToLogout = () => {
   const servedByProxy = useApplicationContext(
     (context) => context.environment.servedByProxy
   );
+  const location = useLocation();
   return (
     <Redirector
       to="logout"
-      location={props.location}
+      location={location}
       queryParams={{
         reason: LOGOUT_REASONS.USER,
         ...(servedByProxy