feat(project): update react-router to 6.4.0

package.json

@@ -55,7 +55,7 @@
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.10.0",
     "react-query": "^3.13.10",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.4.0",
     "react-virtualized": "^9.22.3",
     "wicg-inert": "^3.1.1",
     "yup": "^0.32.9",
@@ -75,7 +75,7 @@
     "@types/react": "^17.0.14",
     "@types/react-dom": "^17.0.9",
     "@types/react-helmet": "^6.1.2",
-    "@types/react-router-dom": "^5.1.8",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized": "^9.21.12",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
@@ -121,7 +121,7 @@
     "workbox-window": "^6.5.2"
   },
   "peerDependencies": {
-    "react-router": "^5.2.1"
+    "react-router": "^6.4.0"
   },
   "optionalDependencies": {
     "gh-pages": "^3.2.3",

src/App.tsx

@@ -3,7 +3,6 @@ import { getI18n, I18nextProvider } from 'react-i18next';
 
 import type { Config } from '#types/Config';
 import Router from '#src/components/Router/Router';
-import Root from '#src/components/Root/Root';
 import LoadingOverlay from '#src/components/LoadingOverlay/LoadingOverlay';
 import QueryProvider from '#src/providers/QueryProvider';
 import { restoreWatchHistory } from '#src/stores/WatchHistoryController';
@@ -14,6 +13,7 @@ import { loadAndValidateConfig } from '#src/utils/configLoad';
 import { clearStoredConfig } from '#src/utils/configOverride';
 import { PersonalShelf } from '#src/enum/PersonalShelf';
 import initI18n from '#src/i18n/config';
+
 import '#src/styles/main.scss';
 
 interface State {
@@ -79,9 +79,7 @@ class App extends Component {
     return (
       <I18nextProvider i18n={getI18n()}>
         <QueryProvider>
-          <Router>
-            <Root error={error} />
-          </Router>
+          <Router error={error} />
         </QueryProvider>
       </I18nextProvider>
     );

src/components/Account/Account.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 
 import customer from '../../fixtures/customer.json';
 import { useAccountStore } from '../../stores/AccountStore';
+import { renderWithRouter } from '../../../test/testUtils';
 
 import Account from './Account';
 
@@ -15,7 +15,7 @@ describe('<Account>', () => {
       publisherConsents: Array.of({ name: 'marketing', label: 'Receive Marketing Emails' } as Consent),
     });
 
-    const { container } = render(<Account panelClassName={'panel-class'} panelHeaderClassName={'header-class'} />);
+    const { container } = renderWithRouter(<Account panelClassName={'panel-class'} panelHeaderClassName={'header-class'} />);
 
     // todo
     expect(container).toMatchSnapshot();

src/components/Account/Account.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import shallow from 'zustand/shallow';
 import DOMPurify from 'dompurify';
 
@@ -16,7 +16,7 @@ import Checkbox from '../Checkbox/Checkbox';
 import HelperText from '../HelperText/HelperText';
 
 import { formatConsentsFromValues, formatConsentValues } from '#src/utils/collection';
-import { addQueryParam } from '#src/utils/history';
+import { addQueryParam } from '#src/utils/location';
 import { useAccountStore } from '#src/stores/AccountStore';
 import { logDev } from '#src/utils/common';
 import { updateConsents, updateUser } from '#src/stores/AccountController';
@@ -36,7 +36,8 @@ interface FormErrors {
 
 const Account = ({ panelClassName, panelHeaderClassName }: Props): JSX.Element => {
   const { t } = useTranslation('user');
-  const history = useHistory();
+  const navigate = useNavigate();
+  const location = useLocation();
   const [viewPassword, toggleViewPassword] = useToggle();
 
   const { customer, customerConsents, publisherConsents } = useAccountStore(
@@ -134,7 +135,7 @@ const Account = ({ panelClassName, panelHeaderClassName }: Props): JSX.Element =
   }
 
   const editPasswordClickHandler = () => {
-    history.push(addQueryParam(history, 'u', 'reset-password'));
+    navigate(addQueryParam(location, 'u', 'reset-password'));
   };
 
   return (

src/components/Button/Button.tsx

@@ -43,25 +43,26 @@ const Button: React.FC<Props> = ({
   className,
   ...rest
 }: Props) => {
-  const buttonClassName = classNames(styles.button, className, styles[color], styles[variant], {
-    [styles.active]: active,
-    [styles.fullWidth]: fullWidth,
-    [styles.large]: size === 'large',
-    [styles.small]: size === 'small',
-    [styles.disabled]: disabled,
-  });
+  const buttonClassName = (isActive: boolean) =>
+    classNames(styles.button, className, styles[color], styles[variant], {
+      [styles.active]: isActive,
+      [styles.fullWidth]: fullWidth,
+      [styles.large]: size === 'large',
+      [styles.small]: size === 'small',
+      [styles.disabled]: disabled,
+    });
 
   const icon = startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null;
   const span = <span className={styles.buttonLabel}>{label}</span>;
 
   return to ? (
-    <NavLink className={buttonClassName} to={to} activeClassName={styles.active} {...rest} exact>
+    <NavLink className={({ isActive }) => buttonClassName(isActive)} to={to} {...rest}>
       {icon}
       {span}
       {children}
     </NavLink>
   ) : (
-    <button className={buttonClassName} onClick={onClick} type={type} disabled={disabled} aria-disabled={disabled} {...rest}>
+    <button className={buttonClassName(active)} onClick={onClick} type={type} disabled={disabled} aria-disabled={disabled} {...rest}>
       {icon}
       {span}
       {children}

src/components/ConfirmationForm/ConfirmationForm.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory, Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import Button from '../Button/Button';
-import { addQueryParam } from '../../utils/history';
 
 import styles from './ConfirmationForm.module.scss';
 
+import { addQueryParam } from '#src/utils/location';
+
 type Props = {
   email?: string;
   loggedIn?: boolean;
@@ -15,7 +16,7 @@ type Props = {
 
 const ConfirmationForm: React.FC<Props> = ({ email, onBackToLogin, loggedIn }: Props) => {
   const { t } = useTranslation('account');
-  const history = useHistory();
+  const location = useLocation();
 
   return (
     <div className={styles.forgotPasswordForm}>
@@ -25,7 +26,7 @@ const ConfirmationForm: React.FC<Props> = ({ email, onBackToLogin, loggedIn }: P
       {!loggedIn && (
         <React.Fragment>
           <span className={styles.notSure}>{t('reset.not_sure')}</span>
-          <Link className={styles.link} to={addQueryParam(history, 'u', 'forgot-password')}>
+          <Link className={styles.link} to={addQueryParam(location, 'u', 'forgot-password')}>
             {t('reset.try_again')}
           </Link>
         </React.Fragment>

src/components/LoginForm/LoginForm.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { useHistory } from 'react-router';
+import { useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
 
 import useToggle from '../../hooks/useToggle';
-import { addQueryParam } from '../../utils/history';
 import TextField from '../TextField/TextField';
 import Button from '../Button/Button';
 import Link from '../Link/Link';
@@ -16,6 +15,7 @@ import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './LoginForm.module.scss';
 
+import { addQueryParam } from '#src/utils/location';
 import type { FormErrors } from '#types/form';
 import type { LoginFormData } from '#types/account';
 
@@ -32,7 +32,7 @@ type Props = {
 const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submitting, siteName }: Props) => {
   const [viewPassword, toggleViewPassword] = useToggle();
   const { t } = useTranslation('account');
-  const history = useHistory();
+  const location = useLocation();
 
   return (
     <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'login-form' : undefined} noValidate>
@@ -68,12 +68,12 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submit
         testId="login-password-input"
       />
       {submitting && <LoadingOverlay transparentBackground inline />}
-      <Link className={styles.link} to={addQueryParam(history, 'u', 'forgot-password')}>
+      <Link className={styles.link} to={addQueryParam(location, 'u', 'forgot-password')}>
         {t('login.forgot_password')}
       </Link>
       <Button type="submit" label={t('login.sign_in')} variant="contained" color="primary" size="large" disabled={submitting} fullWidth />
       <p className={styles.bottom}>
-        {t('login.not_registered', { siteName })} <Link to={addQueryParam(history, 'u', 'create-account')}>{t('login.sign_up')}</Link>
+        {t('login.not_registered', { siteName })} <Link to={addQueryParam(location, 'u', 'create-account')}>{t('login.sign_up')}</Link>
       </p>
     </form>
   );

src/components/MenuButton/MenuButton.tsx

@@ -21,12 +21,10 @@ const MenuButton: React.FC<Props> = ({ label, to, onClick, tabIndex = 0, active
     return (
       <NavLink
         aria-label={label}
-        className={classNames(styles.menuButton, { [styles.small]: small })}
+        className={({ isActive }) => classNames(styles.menuButton, { [styles.small]: small }, { [styles.active]: isActive })}
         onClick={onClick}
-        activeClassName={styles.active}
         to={to}
         tabIndex={tabIndex}
-        exact
       >
         {icon}
         <span className={styles.label}>{label}</span>

src/components/Payment/Payment.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { formatDate, formatPrice } from '../../utils/formatting';
 import TextField from '../TextField/TextField';
 import type { Customer } from '../../../types/account';
 import LoadingOverlay from '../LoadingOverlay/LoadingOverlay';
 import Button from '../Button/Button';
-import { addQueryParam } from '../../utils/history';
 
 import styles from './Payment.module.scss';
 
+import { formatDate, formatPrice } from '#src/utils/formatting';
+import { addQueryParam } from '#src/utils/location';
 import type { PaymentDetail, Subscription, Transaction } from '#types/subscription';
 import type { AccessModel } from '#types/Config';
 
@@ -44,18 +44,19 @@ const Payment = ({
   const { t } = useTranslation(['user', 'account']);
   const hiddenTransactionsCount = transactions ? transactions?.length - VISIBLE_TRANSACTIONS : 0;
   const hasMoreTransactions = hiddenTransactionsCount > 0;
-  const history = useHistory();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   function onCompleteSubscriptionClick() {
-    history.push(addQueryParam(history, 'u', 'choose-offer'));
+    navigate(addQueryParam(location, 'u', 'choose-offer'));
   }
 
   function onCancelSubscriptionClick() {
-    history.push(addQueryParam(history, 'u', 'unsubscribe'));
+    navigate(addQueryParam(location, 'u', 'unsubscribe'));
   }
 
   function onRenewSubscriptionClick() {
-    history.push(addQueryParam(history, 'u', 'renew-subscription'));
+    navigate(addQueryParam(location, 'u', 'renew-subscription'));
   }
 
   function getTitle(period: Subscription['period']) {

src/components/RegistrationForm/RegistrationForm.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { useHistory } from 'react-router';
+import { useLocation } from 'react-router';
 import { useTranslation } from 'react-i18next';
 import DOMPurify from 'dompurify';
 
 import useToggle from '../../hooks/useToggle';
-import { addQueryParam } from '../../utils/history';
 import TextField from '../TextField/TextField';
 import Button from '../Button/Button';
 import IconButton from '../IconButton/IconButton';
@@ -19,6 +18,7 @@ import { IS_DEV_BUILD } from '../../utils/common';
 
 import styles from './RegistrationForm.module.scss';
 
+import { addQueryParam } from '#src/utils/location';
 import type { FormErrors } from '#types/form';
 import type { RegistrationFormData, Consent } from '#types/account';
 
@@ -54,7 +54,7 @@ const RegistrationForm: React.FC<Props> = ({
   const [viewPassword, toggleViewPassword] = useToggle();
 
   const { t } = useTranslation('account');
-  const history = useHistory();
+  const location = useLocation();
 
   const formatConsentLabel = (label: string): string | JSX.Element => {
     const sanitizedLabel = DOMPurify.sanitize(label);
@@ -138,7 +138,7 @@ const RegistrationForm: React.FC<Props> = ({
         fullWidth
       />
       <p className={styles.bottom}>
-        {t('registration.already_account')} <Link to={addQueryParam(history, 'u', 'login')}>{t('login.sign_in')}</Link>
+        {t('registration.already_account')} <Link to={addQueryParam(location, 'u', 'login')}>{t('login.sign_in')}</Link>
       </p>
       {submitting && <LoadingOverlay transparentBackground inline />}
     </form>

src/components/Root/Root.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Route, Routes } from 'react-router';
 
 import Root from './Root';
 
@@ -8,7 +9,11 @@ describe('<Root />', () => {
   it('renders error page when error prop is passed', () => {
     mockWindowLocation('/');
     const error = new Error();
-    const { queryByText } = renderWithRouter(<Root error={error} />);
+    const { queryByText } = renderWithRouter(
+      <Routes>
+        <Route element={<Root error={error} />} />
+      </Routes>,
+    );
 
     expect(queryByText('generic_error_heading')).toBeDefined();
     expect(queryByText('generic_error_description')).toBeDefined();