From d341be24f7a889c3535bb6e94146c04addd1bc6e Mon Sep 17 00:00:00 2001
From: Jan Tojnar <jtojnar@gmail.com>
Date: Thu, 9 Dec 2021 08:56:49 +0100
Subject: [PATCH] wip: Switch to react-router 6

Currently broken because regex pattern support has been removed:

https://github.com/remix-run/react-router/issues/8254
---
 assets/js/templates/App.jsx         | 206 +++++++++++++------------
 assets/js/templates/EntriesPage.jsx |  45 +++---
 assets/js/templates/Item.jsx        |  26 ++--
 assets/js/templates/LoginForm.jsx   |  19 ++-
 assets/js/templates/NavFilters.jsx  |   4 +-
 assets/js/templates/NavSearch.jsx   |  20 +--
 assets/js/templates/NavSources.jsx  |   4 +-
 assets/js/templates/NavTags.jsx     |   4 +-
 assets/js/templates/SearchList.jsx  |  12 +-
 assets/js/templates/SourcesPage.jsx |   6 +-
 assets/package-lock.json            | 225 ++++++----------------------
 assets/package.json                 |   2 +-
 12 files changed, 235 insertions(+), 338 deletions(-)

diff --git a/assets/js/templates/App.jsx b/assets/js/templates/App.jsx
index 5fcabf1c44..a8170d3c5c 100644
--- a/assets/js/templates/App.jsx
+++ b/assets/js/templates/App.jsx
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import nullable from 'prop-types-nullable';
 import {
     BrowserRouter as Router,
-    Switch,
+    Routes,
     Route,
     Link,
     Redirect,
     useHistory,
     useLocation,
-    useRouteMatch,
+    useMatch,
+    useNavigate,
 } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Collapse from '@kunukn/react-collapse';
@@ -147,10 +148,15 @@ function PureApp({
     }, []);
 
     // TODO: move stuff that depends on this to the App.
-    const history = useHistory();
+    const navigate = useNavigate();
+    React.useEffect(() => {
+        selfoss.navigate = navigate;
+    }, [navigate]);
+
+    const entriesPageMatch = useMatch(ENTRIES_ROUTE_PATTERN);
     React.useEffect(() => {
-        selfoss.history = history;
-    }, [history]);
+        selfoss.entriesPageMatch = entriesPageMatch;
+    }, [entriesPageMatch]);
 
     // Prepare path of the homepage for redirecting from /
     let homePagePath = configuration.homepage.split('/');
@@ -181,97 +187,113 @@ function PureApp({
         <React.StrictMode>
             <Message message={globalMessage} />
 
-            <Switch>
-                <Route path="/sign/in">
-                    {/* menu open for smartphone */}
-                    <div id="loginform" role="main">
-                        <LoginForm
-                            {...{offlineEnabled}}
-                        />
-                    </div>
-                </Route>
-
-                <Route path="/">
-                    <CheckAuthorization
-                        isAllowed={selfoss.isAllowedToRead()}
-                        _={_}
-                    >
-                        <div id="nav-mobile" role="navigation">
-                            <div id="nav-mobile-logo">
-                                <div id="nav-mobile-count" className={classNames({'unread-count': true, offline: offlineState, online: !offlineState, unread: unreadItemsCount > 0})}>
-                                    <span className={classNames({'offline-count': true, offline: offlineState, online: !offlineState, diff: unreadItemsCount !== unreadItemsOfflineCount && unreadItemsOfflineCount})}>{unreadItemsOfflineCount > 0 ? unreadItemsOfflineCount : ''}</span>
-                                    <span className="count">{unreadItemsCount}</span>
+            <Routes>
+                <Route
+                    path="/sign/in"
+                    element={
+                        /* menu open for smartphone */
+                        <div id="loginform" role="main">
+                            <LoginForm
+                                {...{offlineEnabled}}
+                            />
+                        </div>
+                    }
+                />
+
+                <Route
+                    path="/"
+                    element={
+                        <CheckAuthorization
+                            isAllowed={selfoss.isAllowedToRead()}
+                            _={_}
+                        >
+                            <div id="nav-mobile" role="navigation">
+                                <div id="nav-mobile-logo">
+                                    <div id="nav-mobile-count" className={classNames({'unread-count': true, offline: offlineState, online: !offlineState, unread: unreadItemsCount > 0})}>
+                                        <span className={classNames({'offline-count': true, offline: offlineState, online: !offlineState, diff: unreadItemsCount !== unreadItemsOfflineCount && unreadItemsOfflineCount})}>{unreadItemsOfflineCount > 0 ? unreadItemsOfflineCount : ''}</span>
+                                        <span className="count">{unreadItemsCount}</span>
+                                    </div>
                                 </div>
+                                <button
+                                    id="nav-mobile-settings"
+                                    accessKey="t"
+                                    aria-label={_('settingsbutton')}
+                                    onClick={menuButtonOnClick}
+                                >
+                                    <FontAwesomeIcon icon={icons.menu} size="2x" />
+                                </button>
                             </div>
-                            <button
-                                id="nav-mobile-settings"
-                                accessKey="t"
-                                aria-label={_('settingsbutton')}
-                                onClick={menuButtonOnClick}
-                            >
-                                <FontAwesomeIcon icon={icons.menu} size="2x" />
-                            </button>
-                        </div>
 
-                        {/* navigation */}
-                        <Collapse isOpen={!smartphone || navExpanded} className="collapse-css-transition">
-                            <div id="nav" role="navigation">
-                                <Navigation
-                                    entriesPage={entriesPage}
-                                    setNavExpanded={setNavExpanded}
-                                    navSourcesExpanded={navSourcesExpanded}
-                                    setNavSourcesExpanded={setNavSourcesExpanded}
-                                    offlineState={offlineState}
-                                    allItemsCount={allItemsCount}
-                                    allItemsOfflineCount={allItemsOfflineCount}
-                                    unreadItemsCount={unreadItemsCount}
-                                    unreadItemsOfflineCount={unreadItemsOfflineCount}
-                                    starredItemsCount={starredItemsCount}
-                                    starredItemsOfflineCount={starredItemsOfflineCount}
-                                    sourcesState={sourcesState}
-                                    setSourcesState={setSourcesState}
-                                    sources={sources}
-                                    setSources={setSources}
-                                    tags={tags}
-                                    reloadAll={reloadAll}
-                                />
+                            {/* navigation */}
+                            <Collapse isOpen={!smartphone || navExpanded} className="collapse-css-transition">
+                                <div id="nav" role="navigation">
+                                    <Navigation
+                                        entriesPage={entriesPage}
+                                        setNavExpanded={setNavExpanded}
+                                        navSourcesExpanded={navSourcesExpanded}
+                                        setNavSourcesExpanded={setNavSourcesExpanded}
+                                        offlineState={offlineState}
+                                        allItemsCount={allItemsCount}
+                                        allItemsOfflineCount={allItemsOfflineCount}
+                                        unreadItemsCount={unreadItemsCount}
+                                        unreadItemsOfflineCount={unreadItemsOfflineCount}
+                                        starredItemsCount={starredItemsCount}
+                                        starredItemsOfflineCount={starredItemsOfflineCount}
+                                        sourcesState={sourcesState}
+                                        setSourcesState={setSourcesState}
+                                        sources={sources}
+                                        setSources={setSources}
+                                        tags={tags}
+                                        reloadAll={reloadAll}
+                                    />
+                                </div>
+                            </Collapse>
+
+                            <ul id="search-list">
+                                <SearchList />
+                            </ul>
+
+                            {/* content */}
+                            <div id="content" role="main">
+                                <Routes>
+                                    <Route
+                                        path="/"
+                                        element={
+                                            <Redirect to={`/${homePagePath.join('/')}`} />
+                                        }
+                                    />
+                                    <Route
+                                        /* TODO: regex pattern does not work https://github.com/remix-run/react-router/issues/8254 */
+                                        path={ENTRIES_ROUTE_PATTERN}
+                                        element={
+                                            <EntriesPage
+                                                ref={entriesRef}
+                                                setNavExpanded={setNavExpanded}
+                                                configuration={configuration}
+                                                navSourcesExpanded={navSourcesExpanded}
+                                                setTitle={setTitle}
+                                                unreadItemsCount={unreadItemsCount}
+                                            />
+                                        }
+                                    />
+                                    <Route
+                                        path="/manage/sources"
+                                        element={
+                                            <SourcesPage />
+                                        }
+                                    />
+                                    <Route
+                                        path="*"
+                                        element={
+                                            <NotFound />
+                                        }
+                                    />
+                                </Routes>
                             </div>
-                        </Collapse>
-
-                        <ul id="search-list">
-                            <SearchList />
-                        </ul>
-
-                        {/* content */}
-                        <div id="content" role="main">
-                            <Switch>
-                                <Route exact path="/">
-                                    <Redirect to={`/${homePagePath.join('/')}`} />
-                                </Route>
-                                <Route path={ENTRIES_ROUTE_PATTERN}>
-                                    {(routeProps) => (
-                                        <EntriesPage
-                                            {...routeProps}
-                                            ref={entriesRef}
-                                            setNavExpanded={setNavExpanded}
-                                            configuration={configuration}
-                                            navSourcesExpanded={navSourcesExpanded}
-                                            setTitle={setTitle}
-                                            unreadItemsCount={unreadItemsCount}
-                                        />
-                                    )}
-                                </Route>
-                                <Route path="/manage/sources">
-                                    <SourcesPage />
-                                </Route>
-                                <Route path="*">
-                                    <NotFound />
-                                </Route>
-                            </Switch>
-                        </div>
-                    </CheckAuthorization>
-                </Route>
-            </Switch>
+                        </CheckAuthorization>
+                    }
+                />
+            </Routes>
         </React.StrictMode>
     );
 }
diff --git a/assets/js/templates/EntriesPage.jsx b/assets/js/templates/EntriesPage.jsx
index 6464bbeb92..73db0329e6 100644
--- a/assets/js/templates/EntriesPage.jsx
+++ b/assets/js/templates/EntriesPage.jsx
@@ -115,7 +115,7 @@ function reloadList({
             }
 
             if (error instanceof HttpError && error.response.status === 403) {
-                selfoss.history.push('/sign/in', {
+                selfoss.navigage('/sign/in', {
                     error: selfoss.app._('error_session_expired')
                 });
                 return;
@@ -673,13 +673,6 @@ export default class StateHolder extends React.Component {
         return params.category?.startsWith('source-') ? parseInt(params.category.replace(/^source-/, ''), 10) : null;
     }
 
-    getActiveFilter() {
-        if (!this.props.match) {
-            return null;
-        }
-        return this.props.match.params.filter;
-    }
-
     /**
      * Mark all visible items as read
      */
@@ -721,8 +714,8 @@ export default class StateHolder extends React.Component {
         // close opened entry and list
         this.setExpandedEntries({});
 
-        if (ids.length !== 0 && this.props.match.filter === FilterType.UNREAD) {
-            markedEntries = markedEntries.filter(({ id }) => ids.includes(id));
+        if (this.entriesPageMatch.filter === FilterType.UNREAD) {
+            markedEntries = [];
         }
 
         this.setLoadingState(LoadingState.LOADING);
@@ -747,8 +740,10 @@ export default class StateHolder extends React.Component {
                 selfoss.dbOffline.enqueueStatuses(statuses);
             }).catch((error) => {
                 if (error instanceof HttpError && error.response.status === 403) {
-                    selfoss.history.push('/sign/in', {
-                        error: selfoss.app._('error_session_expired')
+                    selfoss.navigate('/sign/in', {
+                        state: {
+                            error: selfoss.app._('error_session_expired'),
+                        },
                     });
                     return;
                 }
@@ -809,8 +804,10 @@ export default class StateHolder extends React.Component {
                 selfoss.dbOffline.enqueueStatus(id, 'unread', !markRead);
             }).catch(function(error) {
                 if (error instanceof HttpError && error.response.status === 403) {
-                    selfoss.history.push('/sign/in', {
-                        error: selfoss.app._('error_session_expired')
+                    selfoss.navigate('/sign/in', {
+                        state: {
+                            error: selfoss.app._('error_session_expired'),
+                        },
                     });
                     return;
                 }
@@ -859,8 +856,10 @@ export default class StateHolder extends React.Component {
                 selfoss.dbOffline.enqueueStatus(id, 'starred', markStarred);
             }).catch(function(error) {
                 if (error instanceof HttpError && error.response.status === 403) {
-                    selfoss.history.push('/sign/in', {
-                        error: selfoss.app._('error_session_expired')
+                    selfoss.navigate('/sign/in', {
+                        state: {
+                            error: selfoss.app._('error_session_expired'),
+                        },
                     });
                     return;
                 }
@@ -877,11 +876,14 @@ export default class StateHolder extends React.Component {
         /**
          * HACK: A counter that is increased every time reload action (r key) is triggered.
          */
-        selfoss.history.replace({
-            ...this.props.location,
-            ...makeEntriesLinkLocation(this.props.location, { id: null }),
-            state: forceReload(this.props.location),
-        });
+        selfoss.navigate(
+            {
+                ...this.props.location,
+                ...makeEntriesLinkLocation(this.props.location, { id: null }),
+                state: forceReload(this.props.location),
+            },
+            { replace: true }
+        );
     }
 
     /**
@@ -1042,7 +1044,6 @@ export default class StateHolder extends React.Component {
 
 StateHolder.propTypes = {
     configuration: PropTypes.object.isRequired,
-    location: PropTypes.object.isRequired,
     match: PropTypes.object.isRequired,
     setNavExpanded: PropTypes.func.isRequired,
     navSourcesExpanded: PropTypes.bool.isRequired,
diff --git a/assets/js/templates/Item.jsx b/assets/js/templates/Item.jsx
index 9e7cd4abd1..2eba30ee37 100644
--- a/assets/js/templates/Item.jsx
+++ b/assets/js/templates/Item.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Link, useHistory, useLocation } from 'react-router-dom';
+import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { usePreviousImmediate } from 'rooks';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
@@ -89,15 +89,15 @@ function preventDefaultOnSmartphone(event) {
 }
 
 // Handle closing fullscreen on mobile
-function closeFullScreen({ event, history, location, entryId }) {
+function closeFullScreen({ event, navigate, location, entryId }) {
     event.preventDefault();
     event.stopPropagation();
     selfoss.entriesPage.setEntryExpanded(entryId, false);
-    history.replace(makeEntriesLink(location, { id: null }));
+    navigate(makeEntriesLink(location, { id: null }), { replace: true });
 }
 
 // show/hide entry
-function handleClick({ event, history, location, expanded, id, target }) {
+function handleClick({ event, navigate, location, expanded, id, target }) {
     const expected = selfoss.isMobile() ? '.entry' : '.entry-title';
     if (target !== expected) {
         return;
@@ -109,10 +109,10 @@ function handleClick({ event, history, location, expanded, id, target }) {
     if (expanded) {
         selfoss.entriesPage.setSelectedEntry(id);
         selfoss.entriesPage.deactivateEntry(id);
-        history.replace(makeEntriesLink(location, { id: null }));
+        navigate(makeEntriesLink(location, { id: null }), { replace: true });
     } else {
         selfoss.entriesPage.activateEntry(id);
-        history.replace(makeEntriesLink(location, { id }));
+        navigate(makeEntriesLink(location, { id }), { replace: true });
     }
 }
 
@@ -243,7 +243,7 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
     const contentBlock = React.useRef(null);
 
     const location = useLocation();
-    const history = useHistory();
+    const navigate = useNavigate();
 
     const relDate = React.useMemo(
         () => datetimeRelative(currentTime, item.datetime),
@@ -353,13 +353,13 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
     }, [configuration, expanded, item.id, item.unread, previouslyExpanded]);
 
     const entryOnClick = React.useCallback(
-        (event) => handleClick({ event, history, location, expanded, id: item.id, target: '.entry' }),
-        [history, location, expanded, item.id]
+        (event) => handleClick({ event, navigate, location, expanded, id: item.id, target: '.entry' }),
+        [navigate, location, expanded, item.id]
     );
 
     const titleOnClick = React.useCallback(
-        (event) => handleClick({ event, history, location, expanded, id: item.id, target: '.entry-title' }),
-        [history, location, expanded, item.id]
+        (event) => handleClick({ event, navigate, location, expanded, id: item.id, target: '.entry-title' }),
+        [navigate, location, expanded, item.id]
     );
 
     const starOnClick = React.useCallback(
@@ -386,8 +386,8 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
     );
 
     const closeOnClick = React.useCallback(
-        (event) => closeFullScreen({ event, history, location, entryId: item.id }),
-        [history, location, item.id]
+        (event) => closeFullScreen({ event, navigate, location, entryId: item.id }),
+        [navigate, location, item.id]
     );
 
     const titleHtml = React.useMemo(
diff --git a/assets/js/templates/LoginForm.jsx b/assets/js/templates/LoginForm.jsx
index e1cbfb8a0d..e6d5f2bba0 100644
--- a/assets/js/templates/LoginForm.jsx
+++ b/assets/js/templates/LoginForm.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { SpinnerBig } from './Spinner';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { HttpError, LoginError } from '../errors';
 import { ConfigurationContext } from '../helpers/configuration';
 import { LocalizationContext } from '../helpers/i18n';
@@ -10,7 +10,7 @@ import { LocalizationContext } from '../helpers/i18n';
 function handleLogIn({
     event,
     configuration,
-    history,
+    navigate,
     setLoading,
     username,
     password,
@@ -21,7 +21,7 @@ function handleLogIn({
     setLoading(true);
 
     selfoss.login({ configuration, username, password, enableOffline }).then(() => {
-        history.push('/');
+        navigate('/');
     }).catch((err) => {
         const message =
             err instanceof LoginError
@@ -32,8 +32,11 @@ function handleLogIn({
                             ? `HTTP ${err.response.status} ${err.message}`
                             : err.message,
                 });
-        history.replace('/sign/in', {
-            error: message,
+        navigate('/sign/in', {
+            replace: true,
+            state: {
+                error: message,
+            },
         });
     }).finally(() => {
         setLoading(false);
@@ -49,7 +52,7 @@ export default function LoginForm({
     const [enableOffline, setEnableOffline] = React.useState(offlineEnabled);
 
     const configuration = React.useContext(ConfigurationContext);
-    const history = useHistory();
+    const navigate = useNavigate();
     const location = useLocation();
     const error = location?.state?.error;
 
@@ -58,13 +61,13 @@ export default function LoginForm({
             handleLogIn({
                 event,
                 configuration,
-                history,
+                navigate,
                 setLoading,
                 username,
                 password,
                 enableOffline
             }),
-        [configuration, history, username, password, enableOffline]
+        [configuration, navigate, username, password, enableOffline]
     );
 
     const usernameOnChange = React.useCallback(
diff --git a/assets/js/templates/NavFilters.jsx b/assets/js/templates/NavFilters.jsx
index 991a336a3f..279f210a8e 100644
--- a/assets/js/templates/NavFilters.jsx
+++ b/assets/js/templates/NavFilters.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, useRouteMatch } from 'react-router-dom';
+import { Link, useMatch } from 'react-router-dom';
 import classNames from 'classnames';
 import { FilterType } from '../Filter';
 import { forceReload, makeEntriesLinkLocation, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
@@ -22,7 +22,7 @@ export default function NavFilters({
     const [expanded, setExpanded] = React.useState(true);
 
     // useParams does not seem to work.
-    const match = useRouteMatch(ENTRIES_ROUTE_PATTERN);
+    const match = useMatch(ENTRIES_ROUTE_PATTERN);
     const params = match !== null ? match.params : {};
 
     const toggleExpanded = React.useCallback(
diff --git a/assets/js/templates/NavSearch.jsx b/assets/js/templates/NavSearch.jsx
index 725475c5c1..e9a3cbd8a9 100644
--- a/assets/js/templates/NavSearch.jsx
+++ b/assets/js/templates/NavSearch.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import classNames from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { makeEntriesLink } from '../helpers/uri';
@@ -8,7 +8,7 @@ import * as icons from '../icons';
 import { LocalizationContext } from '../helpers/i18n';
 
 // search button shows search input or executes search
-function handleSubmit({ active, setActive, searchField, searchText, history, location, setNavExpanded }) {
+function handleSubmit({ active, setActive, searchField, searchText, navigate, location, setNavExpanded }) {
     if (!selfoss.isSmartphone() && !active) {
         setActive(true);
         searchField.current.focus();
@@ -16,7 +16,7 @@ function handleSubmit({ active, setActive, searchField, searchText, history, loc
         return;
     }
 
-    history.push(makeEntriesLink(location, { search: searchText, id: null }));
+    navigate(makeEntriesLink(location, { search: searchText, id: null }));
     setActive(false);
     searchField.current.blur();
 
@@ -34,7 +34,7 @@ function handleFieldKeyUp({ event, searchButton, searchRemoveButton }) {
 }
 
 // remove button of search
-function handleRemove({ setActive, searchField, history, location }) {
+function handleRemove({ setActive, searchField, navigate, location }) {
     const queryString = new URLSearchParams(location.search);
     const oldTerm = queryString.get('search');
 
@@ -45,7 +45,7 @@ function handleRemove({ setActive, searchField, history, location }) {
         return;
     }
 
-    history.push(makeEntriesLink(location, { search: '', id: null }));
+    navigate(makeEntriesLink(location, { search: '', id: null }));
 }
 
 export default function NavSearch({ setNavExpanded, offlineState }) {
@@ -56,7 +56,7 @@ export default function NavSearch({ setNavExpanded, offlineState }) {
     const searchRemoveButton = React.useRef(null);
 
     const location = useLocation();
-    const history = useHistory();
+    const navigate = useNavigate();
 
     const queryString = new URLSearchParams(location.search);
     const oldTerm = queryString.get('search') ?? '';
@@ -83,13 +83,13 @@ export default function NavSearch({ setNavExpanded, offlineState }) {
     );
 
     const removeOnClick = React.useCallback(
-        () => handleRemove({ setActive, searchField, history, location }),
-        [history, location]
+        () => handleRemove({ setActive, searchField, navigate, location }),
+        [navigate, location]
     );
 
     const searchOnClick = React.useCallback(
-        () => handleSubmit({ active, setActive, searchField, searchText, history, location, setNavExpanded }),
-        [active, searchText, history, location, setNavExpanded]
+        () => handleSubmit({ active, setActive, searchField, searchText, navigate, location, setNavExpanded }),
+        [active, searchText, navigate, location, setNavExpanded]
     );
 
     const _ = React.useContext(LocalizationContext);
diff --git a/assets/js/templates/NavSources.jsx b/assets/js/templates/NavSources.jsx
index 043b2a91a1..9b24246b15 100644
--- a/assets/js/templates/NavSources.jsx
+++ b/assets/js/templates/NavSources.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link, useRouteMatch } from 'react-router-dom';
+import { Link, useMatch } from 'react-router-dom';
 import { usePreviousImmediate } from 'rooks';
 import classNames from 'classnames';
 import { unescape } from 'html-escaper';
@@ -73,7 +73,7 @@ export default function NavSources({
     const reallyExpanded = navSourcesExpanded && sourcesState === LoadingState.SUCCESS;
 
     // useParams does not seem to work.
-    const match = useRouteMatch(ENTRIES_ROUTE_PATTERN);
+    const match = useMatch(ENTRIES_ROUTE_PATTERN);
     const params = match !== null ? match.params : {};
     const currentSource = params.category?.startsWith('source-') ? parseInt(params.category.replace(/^source-/, ''), 10) : null;
 
diff --git a/assets/js/templates/NavTags.jsx b/assets/js/templates/NavTags.jsx
index e24f7ee36b..46c9c6537b 100644
--- a/assets/js/templates/NavTags.jsx
+++ b/assets/js/templates/NavTags.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import nullable from 'prop-types-nullable';
-import { Link, useRouteMatch } from 'react-router-dom';
+import { Link, useMatch } from 'react-router-dom';
 import classNames from 'classnames';
 import { unescape } from 'html-escaper';
 import { forceReload, makeEntriesLinkLocation, ENTRIES_ROUTE_PATTERN } from '../helpers/uri';
@@ -78,7 +78,7 @@ export default function NavTags({ setNavExpanded, tags }) {
     const [expanded, setExpanded] = React.useState(true);
 
     // useParams does not seem to work.
-    const match = useRouteMatch(ENTRIES_ROUTE_PATTERN);
+    const match = useMatch(ENTRIES_ROUTE_PATTERN);
     const params = match !== null ? match.params : {};
 
     const currentAllTags = params.category === 'all';
diff --git a/assets/js/templates/SearchList.jsx b/assets/js/templates/SearchList.jsx
index a96f3b6669..c03c88e605 100644
--- a/assets/js/templates/SearchList.jsx
+++ b/assets/js/templates/SearchList.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { makeEntriesLink } from '../helpers/uri';
 import * as icons from '../icons';
@@ -36,7 +36,7 @@ function joinTerm(words) {
 
 
 // remove search term
-function handleRemove({ index, location, history, regexSearch }) {
+function handleRemove({ index, location, navigate, regexSearch }) {
     let newterm;
     if (regexSearch) {
         newterm = '';
@@ -49,17 +49,17 @@ function handleRemove({ index, location, history, regexSearch }) {
         newterm = joinTerm(termArray);
     }
 
-    history.push(makeEntriesLink(location, { search: newterm, id: null }));
+    navigate(makeEntriesLink(location, { search: newterm, id: null }));
 }
 
 
 function SearchWord({ regexSearch, index, item }) {
     const location = useLocation();
-    const history = useHistory();
+    const navigate = useNavigate();
 
     const removeOnClick = React.useCallback(
-        () => handleRemove({ index, location, history, regexSearch }),
-        [index, location, history, regexSearch]
+        () => handleRemove({ index, location, navigate, regexSearch }),
+        [index, location, navigate, regexSearch]
     );
 
     return (
diff --git a/assets/js/templates/SourcesPage.jsx b/assets/js/templates/SourcesPage.jsx
index 2642627266..9cb8b582f7 100644
--- a/assets/js/templates/SourcesPage.jsx
+++ b/assets/js/templates/SourcesPage.jsx
@@ -77,8 +77,10 @@ function loadSources({ abortController, location, setSpouts, setSources, setLoad
 
         selfoss.handleAjaxError(error, false).catch(function(error) {
             if (error instanceof HttpError && error.response.status === 403) {
-                selfoss.history.push('/sign/in', {
-                    error: selfoss.app._('error_session_expired'),
+                selfoss.navigate('/sign/in', {
+                    state: {
+                        error: selfoss.app._('error_session_expired'),
+                    },
                 });
                 return;
             }
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 648c1a8bfc..a41cea0ec9 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -28,7 +28,7 @@
         "react": "^17.0.1",
         "react-aria-menubutton": "^7.0.3",
         "react-dom": "^17.0.1",
-        "react-router-dom": "^5.2.0",
+        "react-router-dom": "^6.4.2",
         "reset-css": "^5.0.1",
         "rooks": "^7.1.1",
         "tinykeys": "^1.1.1",
@@ -165,17 +165,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/@babel/runtime": {
-      "version": "7.19.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.4.tgz",
-      "integrity": "sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
     "node_modules/@csstools/selector-specificity": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
@@ -1785,6 +1774,14 @@
         "@parcel/core": "^2.7.0"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
+      "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@siteparts/show-hide-effects": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@siteparts/show-hide-effects/-/show-hide-effects-1.0.0.tgz",
@@ -3707,19 +3704,6 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
-    "node_modules/history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "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"
-      }
-    },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -3731,14 +3715,6 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
-    "node_modules/hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "dependencies": {
-        "react-is": "^16.7.0"
-      }
-    },
     "node_modules/hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -4193,11 +4169,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -5188,14 +5159,6 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
-    "node_modules/path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dependencies": {
-        "isarray": "0.0.1"
-      }
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -5602,39 +5565,33 @@
       }
     },
     "node_modules/react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
-      "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"
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
+      "integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
+      "dependencies": {
+        "@remix-run/router": "1.0.2"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8"
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
-      "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"
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
+      "integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
+      "dependencies": {
+        "@remix-run/router": "1.0.2",
+        "react-router": "6.4.2"
+      },
+      "engines": {
+        "node": ">=14"
       },
       "peerDependencies": {
-        "react": ">=15"
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
       }
     },
     "node_modules/read-pkg": {
@@ -5816,7 +5773,8 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.10",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
-      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==",
+      "dev": true
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.4.3",
@@ -5887,11 +5845,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
     "node_modules/reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -6637,16 +6590,6 @@
       "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
       "dev": true
     },
-    "node_modules/tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
-    },
-    "node_modules/tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "node_modules/tinykeys": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/tinykeys/-/tinykeys-1.4.0.tgz",
@@ -6796,11 +6739,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "node_modules/value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
     "node_modules/weak-lru-cache": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
@@ -7006,14 +6944,6 @@
         }
       }
     },
-    "@babel/runtime": {
-      "version": "7.19.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.4.tgz",
-      "integrity": "sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==",
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
     "@csstools/selector-specificity": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
@@ -8035,6 +7965,11 @@
         "nullthrows": "^1.1.1"
       }
     },
+    "@remix-run/router": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
+      "integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ=="
+    },
     "@siteparts/show-hide-effects": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@siteparts/show-hide-effects/-/show-hide-effects-1.0.0.tgz",
@@ -9482,19 +9417,6 @@
         "minimalistic-assert": "^1.0.1"
       }
     },
-    "history": {
-      "version": "4.10.1",
-      "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
-      "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "requires": {
-        "@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"
-      }
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -9506,14 +9428,6 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      }
-    },
     "hosted-git-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
@@ -9800,11 +9714,6 @@
         "call-bind": "^1.0.2"
       }
     },
-    "isarray": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
-    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -10498,14 +10407,6 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
-    "path-to-regexp": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
-      "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "requires": {
-        "isarray": "0.0.1"
-      }
-    },
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -10796,33 +10697,20 @@
       "dev": true
     },
     "react-router": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
+      "integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
       "requires": {
-        "@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.0.2"
       }
     },
     "react-router-dom": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
+      "integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
       "requires": {
-        "@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.0.2",
+        "react-router": "6.4.2"
       }
     },
     "read-pkg": {
@@ -10963,7 +10851,8 @@
     "regenerator-runtime": {
       "version": "0.13.10",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz",
-      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw=="
+      "integrity": "sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==",
+      "dev": true
     },
     "regexp.prototype.flags": {
       "version": "1.4.3",
@@ -11010,11 +10899,6 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
-    "resolve-pathname": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
-    },
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@@ -11577,16 +11461,6 @@
       "integrity": "sha512-qsdtZH+vMoCARQtyod4imc2nIJwg9Cc7lPRrw9CzF8ZKR0khdr8+2nX80PBhET3tcyTtJDxAffGh2rXH4tyU8A==",
       "dev": true
     },
-    "tiny-invariant": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
-    },
-    "tiny-warning": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
-    },
     "tinykeys": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/tinykeys/-/tinykeys-1.4.0.tgz",
@@ -11697,11 +11571,6 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
-    "value-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
-    },
     "weak-lru-cache": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/weak-lru-cache/-/weak-lru-cache-1.2.2.tgz",
diff --git a/assets/package.json b/assets/package.json
index 02aab8e3da..4b0b42ae8e 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -23,7 +23,7 @@
     "react": "^17.0.1",
     "react-aria-menubutton": "^7.0.3",
     "react-dom": "^17.0.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.4.2",
     "reset-css": "^5.0.1",
     "rooks": "^7.1.1",
     "tinykeys": "^1.1.1",