Upgrade to latest react-router (#9230)

* Upgrade to latest react-router * Additional * Adjustment to tabs, dedupe routes * Adjust for Route element={...} usage * Align (soon-to-be-removed) gilt routing * Change path='' to index
2023-03-28 09:35:15 +03:00 · 2023-03-28 09:35:15 +03:00 · b4098280d0
commit b4098280d0
parent 6467110b8a
32 changed files with 572 additions and 608 deletions
--- a/packages/apps/src/Content/NotFound.tsx
+++ b/packages/apps/src/Content/NotFound.tsx
@ -4,7 +4,7 @@
 import type { RouteProps } from '@polkadot/apps-routing/types';

 import React from 'react';
-import { Redirect } from 'react-router';
+import { Navigate } from 'react-router';

 interface Props extends RouteProps {
  missingApis?: (string | string[])[];
@ -14,7 +14,7 @@ function NotFound ({ basePath, missingApis = [] }: Props): React.ReactElement {
  console.log(`Redirecting from route "${basePath}" to "/explorer"${missingApis.length ? `, missing the following APIs: ${JSON.stringify(missingApis)}` : ''}`);

  return (
-    <Redirect to='/explorer' />
+    <Navigate to='/explorer' />
  );
 }

--- a/packages/page-accounts/src/index.tsx
+++ b/packages/page-accounts/src/index.tsx
@ -4,7 +4,7 @@
 import type { AppProps as Props } from '@polkadot/react-components/types';

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useAccounts, useIpfs } from '@polkadot/react-hooks';
@ -42,14 +42,22 @@ function AccountsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
        hidden={(hasAccounts && !isIpfs) ? undefined : HIDDEN_ACC}
        items={tabsRef.current}
      />
-      <Switch>
-        <Route path={`${basePath}/vanity`}>
-          <Vanity onStatusChange={onStatusChange} />
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Vanity onStatusChange={onStatusChange} />
+            }
+            path='vanity'
+          />
+          <Route
+            element={
+              <Accounts onStatusChange={onStatusChange} />
+            }
+            index
+          />
        </Route>
-        <Route>
-          <Accounts onStatusChange={onStatusChange} />
-        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-addresses/src/index.tsx
+++ b/packages/page-addresses/src/index.tsx
@ -4,7 +4,7 @@
 import type { AppProps as Props } from '@polkadot/react-components/types';

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -28,11 +28,16 @@ function AddressesApp ({ basePath, onStatusChange }: Props): React.ReactElement<
        basePath={basePath}
        items={itemsRef.current}
      />
-      <Switch>
-        <Route>
-          <Contacts onStatusChange={onStatusChange} />
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Contacts onStatusChange={onStatusChange} />
+            }
+            index
+          />
        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-alliance/src/index.tsx
+++ b/packages/page-alliance/src/index.tsx
@ -4,7 +4,7 @@
 import type { Hash } from '@polkadot/types/interfaces';

 import React, { useCallback, useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import Motions from '@polkadot/app-tech-comm/Proposals';
 import { Tabs } from '@polkadot/react-components';
@ -70,36 +70,50 @@ function AllianceApp ({ basePath, className }: Props): React.ReactElement<Props>
        basePath={basePath}
        items={items}
      />
-      <Switch>
-        <Route path={`${basePath}/announcements`}>
-          <Announcements accouncements={accouncements} />
-        </Route>
-        <Route path={`${basePath}/motions`}>
-          <Motions
-            defaultProposal={api.tx.alliance.addUnscrupulousItems}
-            defaultThreshold={DEFAULT_THRESHOLD}
-            filter={motionFilter}
-            isMember={isVoter}
-            members={voters}
-            prime={prime}
-            proposalHashes={proposalHashes}
-            type='alliance'
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Announcements accouncements={accouncements} />
+            }
+            path='announcements'
+          />
+          <Route
+            element={
+              <Motions
+                defaultProposal={api.tx.alliance.addUnscrupulousItems}
+                defaultThreshold={DEFAULT_THRESHOLD}
+                filter={motionFilter}
+                isMember={isVoter}
+                members={voters}
+                prime={prime}
+                proposalHashes={proposalHashes}
+                type='alliance'
+              />
+            }
+            path='motions'
+          />
+          <Route
+            element={
+              <Unscrupulous unscrupulous={unscrupulous} />
+            }
+            path='unscrupulous'
+          />
+          <Route
+            element={
+              <Members
+                isVoter={isVoter}
+                members={members}
+                prime={prime}
+                rule={rule}
+                unscrupulous={unscrupulous}
+                voters={voters}
+              />
+            }
+            index
          />
        </Route>
-        <Route path={`${basePath}/unscrupulous`}>
-          <Unscrupulous unscrupulous={unscrupulous} />
-        </Route>
-        <Route>
-          <Members
-            isVoter={isVoter}
-            members={members}
-            prime={prime}
-            rule={rule}
-            unscrupulous={unscrupulous}
-            voters={voters}
-          />
-        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-assets/src/index.tsx
+++ b/packages/page-assets/src/index.tsx
@ -6,7 +6,7 @@ import '@polkadot/api-augment/substrate';
 import type { BN } from '@polkadot/util';

 import React, { useMemo, useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
@ -76,18 +76,26 @@ function AssetApp ({ basePath, className }: Props): React.ReactElement<Props> {
        hidden={hidden}
        items={tabsRef.current}
      />
-      <Switch>
-        <Route path={`${basePath}/balances`}>
-          <Balances infos={infos} />
-        </Route>
-        <Route>
-          <Overview
-            ids={ids}
-            infos={infos}
-            openId={openId}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Balances infos={infos} />
+            }
+            path='balances'
+          />
+          <Route
+            element={
+              <Overview
+                ids={ids}
+                infos={infos}
+                openId={openId}
+              />
+            }
+            index
          />
        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-council/src/index.tsx
+++ b/packages/page-council/src/index.tsx
@ -5,7 +5,7 @@ import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
 import type { AccountId } from '@polkadot/types/interfaces';

 import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { useLocation } from 'react-router-dom';

 import { Tabs } from '@polkadot/react-components';
@ -50,14 +50,19 @@ function CouncilApp ({ basePath, className }: Props): React.ReactElement<Props>
        basePath={basePath}
        items={items}
      />
-      <Switch>
-        <Route path={`${basePath}/motions`}>
-          <Motions
-            motions={motions}
-            prime={prime}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Motions
+                motions={motions}
+                prime={prime}
+              />
+            }
+            path='motions'
          />
        </Route>
-      </Switch>
+      </Routes>
      <Overview
        className={[basePath, `${basePath}/candidates`].includes(pathname) ? '' : '--hidden'}
        prime={prime}
--- a/packages/page-democracy/src/index.tsx
+++ b/packages/page-democracy/src/index.tsx
@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0

 import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -32,9 +32,16 @@ function DemocracyApp ({ basePath }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={items}
      />
-      <Switch>
-        <Route><Overview /></Route>
-      </Switch>
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Overview />
+            }
+            index
+          />
+        </Route>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-explorer/src/index.tsx
+++ b/packages/page-explorer/src/index.tsx
@ -6,7 +6,7 @@ import type { TabItem } from '@polkadot/react-components/Tabs/types';
 import type { KeyedEvent } from '@polkadot/react-hooks/ctx/types';

 import React, { useMemo, useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useApi, useBlockAuthors, useBlockEvents } from '@polkadot/react-hooks';
@ -26,19 +26,6 @@ interface Props {
  newEvents?: KeyedEvent[];
 }

-function createPathRef (basePath: string): Record<string, string | string[]> {
-  return {
-    api: `${basePath}/api`,
-    forks: `${basePath}/forks`,
-    latency: `${basePath}/latency`,
-    node: `${basePath}/node`,
-    query: [
-      `${basePath}/query/:value`,
-      `${basePath}/query/`
-    ]
-  };
-}
-
 function createItemsRef (t: TFunction): TabItem[] {
  return [
    {
@ -77,7 +64,6 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props>
  const { lastHeaders } = useBlockAuthors();
  const { eventCount, events } = useBlockEvents();
  const itemsRef = useRef(createItemsRef(t));
-  const pathRef = useRef(createPathRef(basePath));

  const hidden = useMemo<string[]>(
    () => isFunction(api.query.babe?.authorities) ? [] : ['forks'],
@ -91,20 +77,40 @@ function ExplorerApp ({ basePath, className }: Props): React.ReactElement<Props>
        hidden={hidden}
        items={itemsRef.current}
      />
-      <Switch>
-        <Route path={pathRef.current.api}><Api /></Route>
-        <Route path={pathRef.current.forks}><Forks /></Route>
-        <Route path={pathRef.current.latency}><Latency /></Route>
-        <Route path={pathRef.current.query}><BlockInfo /></Route>
-        <Route path={pathRef.current.node}><NodeInfo /></Route>
-        <Route>
-          <Main
-            eventCount={eventCount}
-            events={events}
-            headers={lastHeaders}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={<Api />}
+            path='api'
+          />
+          <Route
+            element={<Forks />}
+            path='forks'
+          />
+          <Route
+            element={<Latency />}
+            path='latency'
+          />
+          <Route
+            element={<NodeInfo />}
+            path='node'
+          />
+          <Route
+            element={<BlockInfo />}
+            path='query/:value?'
+          />
+          <Route
+            element={
+              <Main
+                eventCount={eventCount}
+                events={events}
+                headers={lastHeaders}
+              />
+            }
+            index
          />
        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-extrinsics/src/index.tsx
+++ b/packages/page-extrinsics/src/index.tsx
@ -7,7 +7,7 @@ import type { AppProps as Props } from '@polkadot/react-components/types';
 import type { DecodedExtrinsic } from './types.js';

 import React, { useRef, useState } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -15,15 +15,6 @@ import Decoder from './Decoder.js';
 import Submission from './Submission.js';
 import { useTranslation } from './translate.js';

-function createPathRef (basePath: string): Record<string, string | string[]> {
-  return {
-    decode: [
-      `${basePath}/decode/:encoded`,
-      `${basePath}/decode`
-    ]
-  };
-}
-
 function createItemsRef (t: TFunction): TabItem[] {
  return [
    {
@ -43,7 +34,6 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const [decoded, setDecoded] = useState<DecodedExtrinsic | null>(null);
  const itemsRef = useRef(createItemsRef(t));
-  const pathRef = useRef(createPathRef(basePath));

  return (
    <main className='extrinsics--App'>
@ -51,17 +41,25 @@ function ExtrinsicsApp ({ basePath }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={itemsRef.current}
      />
-      <Switch>
-        <Route path={pathRef.current.decode}>
-          <Decoder
-            defaultValue={decoded && decoded.hex}
-            setLast={setDecoded}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Decoder
+                defaultValue={decoded && decoded.hex}
+                setLast={setDecoded}
+              />
+            }
+            path='decode/:encoded?'
+          />
+          <Route
+            element={
+              <Submission defaultValue={decoded} />
+            }
+            index
          />
        </Route>
-        <Route>
-          <Submission defaultValue={decoded} />
-        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-gilt/src/index.tsx
+++ b/packages/page-gilt/src/index.tsx
@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -31,11 +31,16 @@ function GiltApp ({ basePath, className }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={tabsRef.current}
      />
-      <Switch>
-        <Route>
-          <Overview />
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Overview />
+            }
+            index
+          />
        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-nfts/src/index.tsx
+++ b/packages/page-nfts/src/index.tsx
@ -4,7 +4,7 @@
 import '@polkadot/api-augment/substrate';

 import React, { useMemo, useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
@ -52,17 +52,25 @@ function NftApp ({ basePath, className }: Props): React.ReactElement<Props> {
        hidden={hidden}
        items={tabsRef.current}
      />
-      <Switch>
-        <Route path={`${basePath}/my-nfts`}>
-          <AccountItems infos={infos} />
-        </Route>
-        <Route>
-          <Overview
-            ids={ids}
-            infos={infos}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <AccountItems infos={infos} />
+            }
+            path='my-nfts'
+          />
+          <Route
+            element={
+              <Overview
+                ids={ids}
+                infos={infos}
+              />
+            }
+            index
          />
        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-parachains/src/index.tsx
+++ b/packages/page-parachains/src/index.tsx
@ -6,7 +6,7 @@ import '@polkadot/api-augment/substrate';
 import type { ParaId } from '@polkadot/types/interfaces';

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { useLocation } from 'react-router-dom';

 import { Tabs } from '@polkadot/react-components';
@ -76,27 +76,38 @@ function ParachainsApp ({ basePath, className }: Props): React.ReactElement<Prop
        basePath={basePath}
        items={items.current}
      />
-      <Switch>
-        <Route path={`${basePath}/auctions`}>
-          <Auctions
-            auctionInfo={auctionInfo}
-            campaigns={campaigns}
-            ownedIds={ownedIds}
-            winningData={winningData}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Auctions
+                auctionInfo={auctionInfo}
+                campaigns={campaigns}
+                ownedIds={ownedIds}
+                winningData={winningData}
+              />
+            }
+            path='auctions'
+          />
+          <Route
+            element={
+              <Crowdloan
+                auctionInfo={auctionInfo}
+                campaigns={campaigns}
+                leasePeriod={leasePeriod}
+                ownedIds={ownedIds}
+              />
+            }
+            path='crowdloan'
+          />
+          <Route
+            element={
+              <Proposals proposals={proposals} />
+            }
+            path='proposals'
          />
        </Route>
-        <Route path={`${basePath}/crowdloan`}>
-          <Crowdloan
-            auctionInfo={auctionInfo}
-            campaigns={campaigns}
-            leasePeriod={leasePeriod}
-            ownedIds={ownedIds}
-          />
-        </Route>
-        <Route path={`${basePath}/proposals`}>
-          <Proposals proposals={proposals} />
-        </Route>
-      </Switch>
+      </Routes>
      <Overview
        actionsQueue={actionsQueue}
        className={pathname === basePath ? '' : '--hidden'}
--- a/packages/page-ranked/src/App.tsx
+++ b/packages/page-ranked/src/App.tsx
@ -4,7 +4,7 @@
 import type { PalletColl, PalletPoll } from './types.js';

 import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import Referenda, { useCounter } from '@polkadot/app-referenda/Referenda';
 import { Tabs } from '@polkadot/react-components';
@ -46,19 +46,27 @@ function App ({ basePath, className, palletColl, palletPoll }: Props): React.Rea
        basePath={basePath}
        items={tabs}
      />
-      <Switch>
-        <Route path={`${basePath}/referenda`}>
-          <Referenda
-            members={members && members.memberIds}
-            palletReferenda={palletPoll}
-            palletVote={palletColl}
-            ranks={members && members.memberRanks}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Referenda
+                members={members && members.memberIds}
+                palletReferenda={palletPoll}
+                palletVote={palletColl}
+                ranks={members && members.memberRanks}
+              />
+            }
+            path='referenda'
+          />
+          <Route
+            element={
+              <Members members={members && members.members} />
+            }
+            index
          />
        </Route>
-        <Route>
-          <Members members={members && members.members} />
-        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-rpc/src/index.tsx
+++ b/packages/page-rpc/src/index.tsx
@ -4,7 +4,7 @@
 import type { AppProps as Props } from '@polkadot/react-components/types';

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -28,9 +28,16 @@ function RpcApp ({ basePath }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={itemsRef.current}
      />
-      <Switch>
-        <Route><Rpc /></Route>
-      </Switch>
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Rpc />
+            }
+            index
+          />
+        </Route>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-runtime/src/index.tsx
+++ b/packages/page-runtime/src/index.tsx
@ -4,7 +4,7 @@
 import type { AppProps as Props } from '@polkadot/react-components/types';

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -28,9 +28,16 @@ function RuntimeApp ({ basePath }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={itemsRef.current}
      />
-      <Switch>
-        <Route><Runtime /></Route>
-      </Switch>
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Runtime />
+            }
+            index
+          />
+        </Route>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-settings/src/index.tsx
+++ b/packages/page-settings/src/index.tsx
@ -4,7 +4,7 @@
 import type { AppProps as Props } from '@polkadot/react-components/types';

 import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
@ -60,20 +60,34 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
        hidden={hidden}
        items={items}
      />
-      <Switch>
-        <Route path={`${basePath}/developer`}>
-          <Developer onStatusChange={onStatusChange} />
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Developer onStatusChange={onStatusChange} />
+            }
+            path='developer'
+          />
+          <Route
+            element={
+              <I18n />
+            }
+            path='i18n'
+          />
+          <Route
+            element={
+              <Metadata />
+            }
+            path='metadata'
+          />
+          <Route
+            element={
+              <General />
+            }
+            index
+          />
        </Route>
-        <Route path={`${basePath}/i18n`}>
-          <I18n />
-        </Route>
-        <Route path={`${basePath}/metadata`}>
-          <Metadata />
-        </Route>
-        <Route>
-          <General />
-        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-signing/src/index.tsx
+++ b/packages/page-signing/src/index.tsx
@ -4,7 +4,7 @@
 import type { AppProps as Props } from '@polkadot/react-components/types';

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -33,10 +33,22 @@ function SigningApp ({ basePath }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={itemsRef.current}
      />
-      <Switch>
-        <Route path={`${basePath}/verify`}><Verify /></Route>
-        <Route><Sign /></Route>
-      </Switch>
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Verify />
+            }
+            path='verify'
+          />
+          <Route
+            element={
+              <Sign />
+            }
+            index
+          />
+        </Route>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-society/src/index.tsx
+++ b/packages/page-society/src/index.tsx
@ -5,7 +5,7 @@ import type { DeriveSociety, DeriveSocietyMember } from '@polkadot/api-derive/ty
 import type { MapMember } from './types.js';

 import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
@ -118,28 +118,39 @@ function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props>
        basePath={basePath}
        items={items}
      />
-      <Switch>
-        <Route path={`${basePath}/candidates`}>
-          <Candidates
-            allMembers={allMembers}
-            candidates={candidates}
-            isMember={isMember}
-            ownMembers={ownMembers}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Candidates
+                allMembers={allMembers}
+                candidates={candidates}
+                isMember={isMember}
+                ownMembers={ownMembers}
+              />
+            }
+            path='candidates'
+          />
+          <Route
+            element={
+              <Suspended />
+            }
+            path='suspended'
+          />
+          <Route
+            element={
+              <Overview
+                info={info}
+                isMember={isMember}
+                mapMembers={mapMembers}
+                ownMembers={ownMembers}
+                payoutTotal={payoutTotal}
+              />
+            }
+            index
          />
        </Route>
-        <Route path={`${basePath}/suspended`}>
-          <Suspended />
-        </Route>
-        <Route>
-          <Overview
-            info={info}
-            isMember={isMember}
-            mapMembers={mapMembers}
-            ownMembers={ownMembers}
-            payoutTotal={payoutTotal}
-          />
-        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-staking/src/index.tsx
+++ b/packages/page-staking/src/index.tsx
@ -6,8 +6,8 @@ import type { AppProps as Props } from '@polkadot/react-components/types';
 import type { ElectionStatus, ParaValidatorIndex, ValidatorId } from '@polkadot/types/interfaces';
 import type { BN } from '@polkadot/util';

-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Route, Switch } from 'react-router';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Route, Routes } from 'react-router';
 import { useLocation } from 'react-router-dom';

 import Pools from '@polkadot/app-staking2/Pools';
@ -43,20 +43,6 @@ const OPT_MULTI = {
  ]
 };

-function createPathRef (basePath: string): Record<string, string | string[]> {
-  return {
-    bags: `${basePath}/bags`,
-    payout: `${basePath}/payout`,
-    pools: `${basePath}/pools`,
-    query: [
-      `${basePath}/query/:value`,
-      `${basePath}/query`
-    ],
-    slashes: `${basePath}/slashes`,
-    targets: `${basePath}/targets`
-  };
-}
-
 function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const { api } = useApi();
@ -77,7 +63,6 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
  const ownStashes = useOwnStashInfos();
  const slashes = useAvailableSlashes();
  const targets = useSortedTargets(favorites, withLedger);
-  const pathRef = useRef(createPathRef(basePath));

  const hasQueries = useMemo(
    () => hasAccounts && !!(api.query.imOnline?.authoredBlocks) && !!(api.query.staking.activeEra),
@ -154,43 +139,63 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
        }
        items={items}
      />
-      <Switch>
-        <Route path={pathRef.current.bags}>
-          <Bags ownStashes={ownStashes} />
-        </Route>
-        <Route path={pathRef.current.payout}>
-          <Payouts
-            historyDepth={targets.historyDepth}
-            isInElection={isInElection}
-            ownPools={ownPools}
-            ownValidators={ownValidators}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Bags ownStashes={ownStashes} />
+            }
+            path='bags'
+          />
+          <Route
+            element={
+              <Payouts
+                historyDepth={targets.historyDepth}
+                isInElection={isInElection}
+                ownPools={ownPools}
+                ownValidators={ownValidators}
+              />
+            }
+            path='payout'
+          />
+          <Route
+            element={
+              <Pools ownPools={ownPools} />
+            }
+            path='pools'
+          />
+          <Route
+            element={
+              <Query />
+            }
+            path='query/:value?'
+          />
+          <Route
+            element={
+              <Slashes
+                ownStashes={ownStashes}
+                slashes={slashes}
+              />
+            }
+            path='slashes'
+          />
+          <Route
+            element={
+              <Targets
+                isInElection={isInElection}
+                nominatedBy={nominatedBy}
+                ownStashes={ownStashes}
+                stakingOverview={stakingOverview}
+                targets={targets}
+                toggleFavorite={toggleFavorite}
+                toggleLedger={toggleLedger}
+                toggleNominatedBy={toggleNominatedBy}
+              />
+            }
+            path='targets'
          />
        </Route>
-        <Route path={pathRef.current.pools}>
-          <Pools ownPools={ownPools} />
-        </Route>
-        <Route path={pathRef.current.query}>
-          <Query />
-        </Route>
-        <Route path={pathRef.current.slashes}>
-          <Slashes
-            ownStashes={ownStashes}
-            slashes={slashes}
-          />
-        </Route>
-        <Route path={pathRef.current.targets}>
-          <Targets
-            isInElection={isInElection}
-            nominatedBy={nominatedBy}
-            ownStashes={ownStashes}
-            stakingOverview={stakingOverview}
-            targets={targets}
-            toggleFavorite={toggleFavorite}
-            toggleLedger={toggleLedger}
-            toggleNominatedBy={toggleNominatedBy}
-          />
-        </Route>
-      </Switch>
+      </Routes>
      <Actions
        className={pathname === `${basePath}/actions` ? '' : '--hidden'}
        isInElection={isInElection}
--- a/packages/page-staking2/src/index.tsx
+++ b/packages/page-staking2/src/index.tsx
@ -4,7 +4,7 @@
 import type { AppProps as Props } from '@polkadot/react-components/types';

 import React, { useEffect, useMemo, useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useApi, useFavorites } from '@polkadot/react-hooks';
@ -17,24 +17,9 @@ import { useTranslation } from './translate.js';
 import { clearCache } from './useCache.js';
 import useSessionInfo from './useSessionInfo.js';

-function createPathRef (basePath: string): Record<string, string | string[]> {
-  return {
-    bags: `${basePath}/bags`,
-    payout: `${basePath}/payout`,
-    pools: `${basePath}/pools`,
-    query: [
-      `${basePath}/query/:value`,
-      `${basePath}/query`
-    ],
-    slashes: `${basePath}/slashes`,
-    targets: `${basePath}/targets`
-  };
-}
-
 function StakingApp ({ basePath }: Props): React.ReactElement<Props> {
  const { t } = useTranslation();
  const { api } = useApi();
-  const pathRef = useRef(createPathRef(basePath));

  // on unmount anything else, ensure that for the next round we
  // are starting with a fresh cache (there could be large delays)
@ -71,19 +56,27 @@ function StakingApp ({ basePath }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={itemsRef.current}
      />
-      <Switch>
-        <Route path={pathRef.current.pools}>
-          <Pools />
-        </Route>
+      <Routes>
        <Route path={basePath}>
-          <Validators
-            favorites={favorites}
-            isRelay={isRelay}
-            sessionInfo={sessionInfo}
-            toggleFavorite={toggleFavorite}
+          <Route
+            element={
+              <Pools />
+            }
+            path='pools'
+          />
+          <Route
+            element={
+              <Validators
+                favorites={favorites}
+                isRelay={isRelay}
+                sessionInfo={sessionInfo}
+                toggleFavorite={toggleFavorite}
+              />
+            }
+            index
          />
        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-storage/src/Selection/index.tsx
+++ b/packages/page-storage/src/Selection/index.tsx
@ -4,7 +4,7 @@
 import type { ParitalQueryTypes, QueryTypes } from '../types.js';

 import React, { useCallback, useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -50,11 +50,28 @@ function Selection ({ basePath, onAdd }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={itemsRef.current}
      />
-      <Switch>
-        <Route path={`${basePath}/constants`}><Consts onAdd={_onAdd} /></Route>
-        <Route path={`${basePath}/raw`}><Raw onAdd={_onAdd} /></Route>
-        <Route><Modules onAdd={_onAdd} /></Route>
-      </Switch>
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Consts onAdd={_onAdd} />
+            }
+            path='constants'
+          />
+          <Route
+            element={
+              <Raw onAdd={_onAdd} />
+            }
+            path='raw'
+          />
+          <Route
+            element={
+              <Modules onAdd={_onAdd} />
+            }
+            index
+          />
+        </Route>
+      </Routes>
    </>
  );
 }
--- a/packages/page-sudo/src/index.tsx
+++ b/packages/page-sudo/src/index.tsx
@ -4,7 +4,7 @@
 import type { AppProps as Props } from '@polkadot/react-components/types';

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Icon, Tabs } from '@polkadot/react-components';
 import { useSudo } from '@polkadot/react-hooks';
@ -37,21 +37,29 @@ function SudoApp ({ basePath }: Props): React.ReactElement<Props> {
      />
      {hasSudoKey
        ? (
-          <Switch>
-            <Route path={`${basePath}/key`}>
-              <SetKey
-                allAccounts={allAccounts}
-                isMine={hasSudoKey}
-                sudoKey={sudoKey}
+          <Routes>
+            <Route path={basePath}>
+              <Route
+                element={
+                  <SetKey
+                    allAccounts={allAccounts}
+                    isMine={hasSudoKey}
+                    sudoKey={sudoKey}
+                  />
+                }
+                path='key'
+              />
+              <Route
+                element={
+                  <Sudo
+                    isMine={hasSudoKey}
+                    sudoKey={sudoKey}
+                  />
+                }
+                index
              />
            </Route>
-            <Route>
-              <Sudo
-                isMine={hasSudoKey}
-                sudoKey={sudoKey}
-              />
-            </Route>
-          </Switch>
+          </Routes>
        )
        : (
          <article className='error padded'>
--- a/packages/page-tech-comm/src/App.tsx
+++ b/packages/page-tech-comm/src/App.tsx
@ -5,7 +5,7 @@ import type { CollectiveType } from '@polkadot/react-hooks/types';
 import type { Hash } from '@polkadot/types/interfaces';

 import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useApi, useCall, useCollectiveMembers } from '@polkadot/react-hooks';
@ -53,26 +53,34 @@ function TechCommApp ({ basePath, className, type }: Props): React.ReactElement<
        }
        items={items}
      />
-      <Switch>
-        <Route path={`${basePath}/proposals`}>
-          <Proposals
-            isMember={isMember}
-            members={members}
-            prime={prime}
-            proposalHashes={proposalHashes}
-            type={type}
-          />
-        </Route>
+      <Routes>
        <Route path={basePath}>
-          <Overview
-            isMember={isMember}
-            members={members}
-            prime={prime}
-            proposalHashes={proposalHashes}
-            type={type}
+          <Route
+            element={
+              <Proposals
+                isMember={isMember}
+                members={members}
+                prime={prime}
+                proposalHashes={proposalHashes}
+                type={type}
+              />
+            }
+            path='proposals'
+          />
+          <Route
+            element={
+              <Overview
+                isMember={isMember}
+                members={members}
+                prime={prime}
+                proposalHashes={proposalHashes}
+                type={type}
+              />
+            }
+            index
          />
        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-treasury/src/index.tsx
+++ b/packages/page-treasury/src/index.tsx
@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0

 import React, { useMemo } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';
 import { useApi, useCollectiveMembers } from '@polkadot/react-hooks';
@ -51,21 +51,29 @@ function TreasuryApp ({ basePath }: Props): React.ReactElement<Props> {
        basePath={basePath}
        items={items}
      />
-      <Switch>
-        <Route path={`${basePath}/tips`}>
-          <Tips
-            hashes={tipHashes}
-            isMember={isMember}
-            members={members}
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Tips
+                hashes={tipHashes}
+                isMember={isMember}
+                members={members}
+              />
+            }
+            path='tips'
+          />
+          <Route
+            element={
+              <Overview
+                isMember={isMember}
+                members={members}
+              />
+            }
+            index
          />
        </Route>
-        <Route>
-          <Overview
-            isMember={isMember}
-            members={members}
-          />
-        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/page-utilities/src/index.tsx
+++ b/packages/page-utilities/src/index.tsx
@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0

 import React, { useRef } from 'react';
-import { Route, Switch } from 'react-router';
+import { Route, Routes } from 'react-router';

 import { Tabs } from '@polkadot/react-components';

@ -36,14 +36,22 @@ function UtilitiesApp ({ basePath, className }: Props): React.ReactElement<Props
        basePath={basePath}
        items={tabsRef.current}
      />
-      <Switch>
-        <Route path={`${basePath}/hash`}>
-          <Hash />
+      <Routes>
+        <Route path={basePath}>
+          <Route
+            element={
+              <Hash />
+            }
+            path='hash'
+          />
+          <Route
+            element={
+              <Convert />
+            }
+            index
+          />
        </Route>
-        <Route>
-          <Convert />
-        </Route>
-      </Switch>
+      </Routes>
    </main>
  );
 }
--- a/packages/react-components/package.json
+++ b/packages/react-components/package.json
@ -45,8 +45,8 @@
    "react-i18next": "^12.2.0",
    "react-is": "^18.2.0",
    "react-markdown": "^8.0.6",
-    "react-router": "^5.3.4",
-    "react-router-dom": "^5.3.4",
+    "react-router": "^6.9.0",
+    "react-router-dom": "^6.9.0",
    "react-tooltip": "^4.5.1",
    "rehype-raw": "^6.1.1",
    "semantic-ui-css": "^2.5.0",
--- a/packages/react-components/src/Inset.tsx
+++ b/packages/react-components/src/Inset.tsx
@ -1,145 +0,0 @@
-// Copyright 2017-2023 @polkadot/app-democracy authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import React, { useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
-
-import { useToggle } from '@polkadot/react-hooks';
-
-import Icon from './Icon.js';
-import { styled } from './styled.js';
-
-export interface InsetProps {
-  className?: string;
-  children?: React.ReactNode;
-  isCollapsible?: boolean;
-  isError?: boolean;
-  isSuccess?: boolean;
-  header?: React.ReactNode;
-  href?: string | null;
-  withTopMargin?: boolean;
-  withBottomMargin?: boolean;
-}
-
-function Inset ({ children, className = '', header, href, isCollapsible, isError, isSuccess, withBottomMargin, withTopMargin }: InsetProps): React.ReactElement<InsetProps> | null {
-  const history = useHistory();
-  const [isCollapsed, toggleCollapsed] = useToggle();
-
-  const _onClick = useCallback(
-    (): void => {
-      href && history.push(href);
-    },
-    [history, href]
-  );
-
-  if (!children) {
-    return null;
-  }
-
-  return (
-    <StyledDiv
-      className={`${className} ui--Inset ${href ? 'as-link' : ''} ${isCollapsible ? 'collapsible' : ''} ${(isError && !isSuccess) ? 'error' : ''} ${(!isError && isSuccess) ? 'success' : ''} ${withBottomMargin ? 'bottom-margin' : ''} ${withTopMargin ? 'top-margin' : ''}`}
-    >
-      {isCollapsible && (
-        <div
-          className='header'
-          onClick={toggleCollapsed}
-        >
-          <h2>{header}</h2>
-          <Icon
-            className={isCollapsed ? 'collapsed' : ''}
-            icon='angle-up'
-          />
-        </div>
-      )}
-      <div
-        className={`children${(isCollapsible && isCollapsed) ? ' collapsed' : ''}`}
-        onClick={_onClick}
-      >
-        {children}
-      </div>
-    </StyledDiv>
-  );
-}
-
-const StyledDiv = styled.div`
-  & {
-    box-shadow: 0 3px 3px rgba(0,0,0,.2);
-    position: relative;
-    background: #fefefe;
-    padding: 1rem;
-    transition: all 0.2s;
-    display: flex;
-    flex-direction: column;
-
-    &.bottom-margin {
-      margin-bottom: 2rem;
-    }
-
-    &.top-margin {
-      margin-top: 2rem;
-    }
-
-    &.error {
-      background: rgba(255, 0, 0, 0.05);
-
-      &, h1, h2, h3, h4, h5, h6, p {
-        color: rgba(156, 0, 0) !important;
-      }
-    }
-
-    &.success {
-      border: 1px solid rgb(168, 255, 136);
-      background: rgba(0, 255, 0, 0.05);
-
-      &, h1, h2, h3, h4, h5, h6, p {
-        color: rgba(34, 125, 0) !important;
-      }
-    }
-
-    .header {
-      cursor: pointer;
-      height: 2rem;
-      width: 100%;
-
-      h3 {
-        line-height: 2rem;
-        margin-bottom: 0;
-      }
-
-      .icon {
-        height: 4rem;
-        width: 4rem;
-        font-size: 2rem;
-        color: rgba(0,0,0,0.35);
-        position: absolute;
-        right: 0;
-        top: 0;
-        line-height: 4rem;
-        transition: all 0.2s;
-        transform-origin: center center;
-
-        &.collapsed {
-          transform: rotate(180deg);
-        }
-      }
-    }
-
-    .children {
-      &.collapsed {
-        display: none;
-      }
-    }
-
-    &.as-link {
-      cursor: pointer;
-
-      &:hover {
-        box-shadow: 0 5px 5px rgba(0,0,0,.2);
-        transform: translateY(-2px);
-      }
-    }
-  }
-`;
-
-export default React.memo(Inset);
--- a/packages/react-components/src/Tabs/Tab.tsx
+++ b/packages/react-components/src/Tabs/Tab.tsx
@ -27,10 +27,8 @@ function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRo

  return (
    <StyledNavLink
-      activeClassName='tabLinkActive'
      className={`${className} ui--Tab`}
-      exact={tabIsExact}
-      strict={tabIsExact}
+      end={tabIsExact}
      to={to}
    >
      <div className='tabLinkText'>
@ -63,18 +61,19 @@ const StyledNavLink = styled(NavLink)`
    }
  }

-  &:hover .tabLinkText::after,
-  &.tabLinkActive .tabLinkText::after {
-    content: '';
-    position: absolute;
-    width: 3.14rem;
-    height: 2px;
-    bottom: -2px;
-    left: 50%;
-    transform: translateX(-50%);
+  &.active, &:hover {
+    .tabLinkText::after {
+      content: '';
+      position: absolute;
+      width: 3.14rem;
+      height: 2px;
+      bottom: -2px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
  }

-  &.tabLinkActive {
+  &.active {
    color: var(--color-text) !important;
    font-weight: var(--font-weight-normal);

--- a/packages/react-components/src/TreasuryProposal.tsx
+++ b/packages/react-components/src/TreasuryProposal.tsx
@ -10,22 +10,19 @@ import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';

 import InputAddress from './InputAddress/index.js';
-import Inset, { InsetProps } from './Inset.js';
 import Labelled from './Labelled.js';
 import Static from './Static.js';
 import { useTranslation } from './translate.js';

 interface Props {
  className?: string;
-  asInset?: boolean;
-  insetProps?: Partial<InsetProps>;
  onClick?: () => void;
  proposalId?: string;
  proposal?: TreasuryProposalType | null;
  withLink?: boolean;
 }

-function TreasuryProposal ({ asInset, className = '', insetProps, onClick, proposal, proposalId }: Props): React.ReactElement<Props> | null {
+function TreasuryProposal ({ className = '', onClick, proposal, proposalId }: Props): React.ReactElement<Props> | null {
  const { t } = useTranslation();
  const [stateProposal, setProposal] = useState<TreasuryProposalType | null>(null);
  const { api } = useApi();
@ -76,17 +73,6 @@ function TreasuryProposal ({ asInset, className = '', insetProps, onClick, propo
    </>
  );

-  if (asInset) {
-    return (
-      <Inset
-        className={className}
-        {...insetProps}
-      >
-        {inner}
-      </Inset>
-    );
-  }
-
  return (
    <div
      className={className}
--- a/packages/react-components/src/index.ts
+++ b/packages/react-components/src/index.ts
@ -61,7 +61,6 @@ export { default as InputRpc } from './InputRpc/index.js';
 export { default as InputStorage } from './InputStorage/index.js';
 export { default as InputTags } from './InputTags.js';
 export { default as InputWasm } from './InputWasm.js';
-export { default as Inset } from './Inset.js';
 export { default as Label } from './Label.js';
 export { default as LabelHelp } from './LabelHelp.js';
 export { default as Labelled } from './Labelled.js';
--- a/packages/react-components/src/styles/index.ts
+++ b/packages/react-components/src/styles/index.ts
@ -309,8 +309,8 @@ export default createGlobalStyle<Props & ThemeProps>(({ theme, uiHighlight }: Pr

  .theme--dark,
  .theme--light {
-    .ui--Tabs .tabLinkActive .tabLinkText::after{
-        background: ${getHighlight(uiHighlight)};
+    .ui--Tabs .active .tabLinkText::after {
+      background: ${getHighlight(uiHighlight)};
    }

    .ui.primary.button,
--- a/yarn.lock
+++ b/yarn.lock
@ -136,7 +136,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.20.6, @babel/runtime@npm:^7.9.2":
  version: 7.21.0
  resolution: "@babel/runtime@npm:7.21.0"
  dependencies:
@ -2043,8 +2043,8 @@ __metadata:
    react-i18next: ^12.2.0
    react-is: ^18.2.0
    react-markdown: ^8.0.6
-    react-router: ^5.3.4
-    react-router-dom: ^5.3.4
+    react-router: ^6.9.0
+    react-router-dom: ^6.9.0
    react-tooltip: ^4.5.1
    rehype-raw: ^6.1.1
    semantic-ui-css: ^2.5.0
@ -2526,6 +2526,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@remix-run/router@npm:1.4.0":
+  version: 1.4.0
+  resolution: "@remix-run/router@npm:1.4.0"
+  checksum: 707dce35a2b8138005cf19e63f6fd3c4da05b4b892e9e9118e8b727c3b95953efe27307ca2df35084044df30fa1fc367cf0bbc98d1ded9020c82e61e6242caaf
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-alias@npm:^4.0.3":
  version: 4.0.3
  resolution: "@rollup/plugin-alias@npm:4.0.3"
@ -9854,20 +9861,6 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"history@npm:^4.9.0":
-  version: 4.10.1
-  resolution: "history@npm:4.10.1"
-  dependencies:
-    "@babel/runtime": ^7.1.2
-    loose-envify: ^1.2.0
-    resolve-pathname: ^3.0.0
-    tiny-invariant: ^1.0.2
-    tiny-warning: ^1.0.0
-    value-equal: ^1.0.1
-  checksum: addd84bc4683929bae4400419b5af132ff4e4e9b311a0d4e224579ea8e184a6b80d7f72c55927e4fa117f69076a9e47ce082d8d0b422f1a9ddac7991490ca1d0
-  languageName: node
-  linkType: hard
-
 "hmac-drbg@npm:^1.0.1":
  version: 1.0.1
  resolution: "hmac-drbg@npm:1.0.1"
@ -9879,7 +9872,7 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
  version: 3.3.2
  resolution: "hoist-non-react-statics@npm:3.3.2"
  dependencies:
@ -10986,13 +10979,6 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"isarray@npm:0.0.1":
-  version: 0.0.1
-  resolution: "isarray@npm:0.0.1"
-  checksum: 49191f1425681df4a18c2f0f93db3adb85573bcdd6a4482539d98eac9e705d8961317b01175627e860516a2fc45f8f9302db26e5a380a97a520e272e2a40a8d4
-  languageName: node
-  linkType: hard
-
 "isarray@npm:~1.0.0":
  version: 1.0.0
  resolution: "isarray@npm:1.0.0"
@ -11675,7 +11661,7 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.2.0, loose-envify@npm:^1.3.1, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
  version: 1.4.0
  resolution: "loose-envify@npm:1.4.0"
  dependencies:
@ -13562,15 +13548,6 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"path-to-regexp@npm:^1.7.0":
-  version: 1.8.0
-  resolution: "path-to-regexp@npm:1.8.0"
-  dependencies:
-    isarray: 0.0.1
-  checksum: 709f6f083c0552514ef4780cb2e7e4cf49b0cc89a97439f2b7cc69a608982b7690fb5d1720a7473a59806508fc2dae0be751ba49f495ecf89fd8fbc62abccbcd
-  languageName: node
-  linkType: hard
-
 "path-type@npm:^4.0.0":
  version: 4.0.0
  resolution: "path-type@npm:4.0.0"
@ -14389,7 +14366,7 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"react-is@npm:^16.13.1, react-is@npm:^16.6.0, react-is@npm:^16.6.3, react-is@npm:^16.7.0, react-is@npm:^16.8.6":
+"react-is@npm:^16.13.1, react-is@npm:^16.6.3, react-is@npm:^16.7.0, react-is@npm:^16.8.6":
  version: 16.13.1
  resolution: "react-is@npm:16.13.1"
  checksum: f7a19ac3496de32ca9ae12aa030f00f14a3d45374f1ceca0af707c831b2a6098ef0d6bdae51bd437b0a306d7f01d4677fcc8de7c0d331eb47ad0f46130e53c5f
@ -14489,39 +14466,27 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"react-router-dom@npm:^5.3.4":
-  version: 5.3.4
-  resolution: "react-router-dom@npm:5.3.4"
+"react-router-dom@npm:^6.9.0":
+  version: 6.9.0
+  resolution: "react-router-dom@npm:6.9.0"
  dependencies:
-    "@babel/runtime": ^7.12.13
-    history: ^4.9.0
-    loose-envify: ^1.3.1
-    prop-types: ^15.6.2
-    react-router: 5.3.4
-    tiny-invariant: ^1.0.2
-    tiny-warning: ^1.0.0
+    "@remix-run/router": 1.4.0
+    react-router: 6.9.0
  peerDependencies:
-    react: ">=15"
-  checksum: b86a6f2f5222f041e38adf4e4b32c7643d6735a1a915ef25855b2db285fd059d72ba8d62e5bcd5d822b8ef9520a80453209e55077f5a90d0f72e908979b8f535
+    react: ">=16.8"
+    react-dom: ">=16.8"
+  checksum: 4d593491ab8db5611feda70002c62902baebb84d5c1c5e5b6172496f31f91130deee132bf4240dea634a88cb86c76d6da348f15b9cd5e5197be455efd88edf72
  languageName: node
  linkType: hard

-"react-router@npm:5.3.4, react-router@npm:^5.3.4":
-  version: 5.3.4
-  resolution: "react-router@npm:5.3.4"
+"react-router@npm:6.9.0, react-router@npm:^6.9.0":
+  version: 6.9.0
+  resolution: "react-router@npm:6.9.0"
  dependencies:
-    "@babel/runtime": ^7.12.13
-    history: ^4.9.0
-    hoist-non-react-statics: ^3.1.0
-    loose-envify: ^1.3.1
-    path-to-regexp: ^1.7.0
-    prop-types: ^15.6.2
-    react-is: ^16.6.0
-    tiny-invariant: ^1.0.2
-    tiny-warning: ^1.0.0
+    "@remix-run/router": 1.4.0
  peerDependencies:
-    react: ">=15"
-  checksum: 892d4e274a23bf4f39abc2efca54472fb646d3aed4b584020cf49654d2f50d09a2bacebe7c92b4ec7cb8925077376dfcd0664bad6442a73604397cefec9f01f9
+    react: ">=16.8"
+  checksum: b2a5f42e042bee7a7f116ca7817b0e58359e5353d84887c9fe7a633d7490c03b1e0ae37cd01830c2a381e3d1e7d501bb4751e53cc3d491e25f36582d3f6e0546
  languageName: node
  linkType: hard

@ -14949,13 +14914,6 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"resolve-pathname@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "resolve-pathname@npm:3.0.0"
-  checksum: 6147241ba42c423dbe83cb067a2b4af4f60908c3af57e1ea567729cc71416c089737fe2a73e9e79e7a60f00f66c91e4b45ad0d37cd4be2d43fec44963ef14368
-  languageName: node
-  linkType: hard
-
 "resolve@^1.1.6, resolve@^1.10.0, resolve@^1.20.0, resolve@npm:^1.21.0, resolve@npm:^1.22.1":
  version: 1.22.1
  resolution: "resolve@npm:1.22.1"
@ -16639,20 +16597,13 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"tiny-invariant@npm:^1.0.2, tiny-invariant@npm:^1.0.6":
+"tiny-invariant@npm:^1.0.6":
  version: 1.1.0
  resolution: "tiny-invariant@npm:1.1.0"
  checksum: 27d29bbb9e1d1d86e25766711c28ad91af6d67c87d561167077ac7fbce5212b97bbfe875e70bc369808e075748c825864c9b61f0e9f8652275ec86bcf4dcc924
  languageName: node
  linkType: hard

-"tiny-warning@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "tiny-warning@npm:1.0.3"
-  checksum: da62c4acac565902f0624b123eed6dd3509bc9a8d30c06e017104bedcf5d35810da8ff72864400ad19c5c7806fc0a8323c68baf3e326af7cb7d969f846100d71
-  languageName: node
-  linkType: hard
-
 "tmp-promise@npm:^3.0.2":
  version: 3.0.2
  resolution: "tmp-promise@npm:3.0.2"
@ -17485,13 +17436,6 @@ fsevents@~2.3.2:
  languageName: node
  linkType: hard

-"value-equal@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "value-equal@npm:1.0.1"
-  checksum: bb7ae1facc76b5cf8071aeb6c13d284d023fdb370478d10a5d64508e0e6e53bb459c4bbe34258df29d82e6f561f874f0105eba38de0e61fe9edd0bdce07a77a2
-  languageName: node
-  linkType: hard
-
 "value-or-function@npm:^3.0.0":
  version: 3.0.0
  resolution: "value-or-function@npm:3.0.0"