Feature/update dependency react router dom to v6.x (#340)

* Update dependency "react-router-dom" to v6.x

Update to v6.11.2

* Update dependency "react-router-dom" to v6.x - Replace "Switch" with "Routes"

* Update dependency "react-router-dom" to v6.x - Relative paths

* Update dependency "react-router-dom" to v6.x - Nested routes

* Update dependency "react-router-dom" to v6.x - Prevent route warnings

 - Route without an element causes a warning message.
 - Routes with non-matching Route causes a warning message.

* Update dependency "react-router-dom" to v6.x - Replace "useHistory" with "useNavigate"

* Update dependency "react-router-dom" to v6.x - Fix "Link" usage

* Update dependency "react-router-dom" to v6.x - Overwrite "useParams" and "useLocations" typing

For both functions it's the users fault if they are getting used incorrectly.
It's inconvenient to always have to make sure the params exist (useParam) or to cast the return object to a specific type (useLocation)

 - "useParams": Make generic type non-optional
 - "useLocation": Add generic type

* Update dependency "react-router-dom" to v6.x - Fix use-query-params provider

package.json

@@ -37,7 +37,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^17.0.2",
     "react-i18next": "^12.3.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.11.2",
     "react-scripts": "^5.0.1",
     "react-virtuoso": "^1.8.6",
     "swr": "^2.1.5",
@@ -48,7 +48,6 @@
     "@types/react": "^17.0.2",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^17.0.2",
-    "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
     "eslint": "^8.35.0",

src/App.tsx

@@ -11,7 +11,7 @@ import CssBaseline from '@mui/material/CssBaseline';
 import AppContext from 'components/context/AppContext';
 import DefaultNavBar from 'components/navbar/DefaultNavBar';
 import React from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 import Browse from 'screens/Browse';
 import DownloadQueue from 'screens/DownloadQueue';
 import Extensions from 'screens/Extensions';
@@ -47,71 +47,41 @@ const App: React.FC = () => (
                 overflow: 'auto',
             }}
         >
-            <Switch>
+            <Routes>
                 {/* General Routes */}
-                <Route exact path="/" render={() => <Redirect to="/library" />} />
+                <Route path="/" element={<Navigate to="/library" />} />
-                <Route path="/settings/about">
+                <Route path="settings">
-                    <About />
+                    <Route index element={<Settings />} />
-                </Route>
+                    <Route path="about" element={<About />} />
-                <Route path="/settings/categories">
+                    <Route path="categories" element={<Categories />} />
-                    <Categories />
+                    <Route path="defaultReaderSettings" element={<DefaultReaderSettings />} />
-                </Route>
+                    <Route path="librarySettings" element={<LibrarySettings />} />
-                <Route path="/settings/defaultReaderSettings">
+                    <Route path="backup" element={<Backup />} />
-                    <DefaultReaderSettings />
-                </Route>
-                <Route path="/settings/librarySettings">
-                    <LibrarySettings />
-                </Route>
-                <Route path="/settings/backup">
-                    <Backup />
-                </Route>
-                <Route path="/settings">
-                    <Settings />
                 </Route>
 
                 {/* Manga Routes */}
 
-                <Route exact path="/sources/:sourceId">
+                <Route path="sources">
-                    <SourceMangas />
+                    <Route index element={<Sources />} />
+                    <Route path=":sourceId" element={<SourceMangas />} />
+                    <Route path=":sourceId/configure/" element={<SourceConfigure />} />
+                    <Route path="all/search/" element={<SearchAll />} />
                 </Route>
-                <Route path="/sources/:sourceId/configure/">
+                <Route path="downloads" element={<DownloadQueue />} />
-                    <SourceConfigure />
+                <Route path="manga/:id">
+                    <Route path="chapter/:chapterNum" element={null} />
+                    <Route index element={<Manga />} />
                 </Route>
-                <Route path="/sources/all/search/">
+                <Route path="library" element={<Library />} />
-                    <SearchAll />
+                <Route path="updates" element={<Updates />} />
-                </Route>
+                <Route path="extensions" element={<Extensions />} />
-                <Route path="/downloads">
+                <Route path="browse" element={<Browse />} />
-                    <DownloadQueue />
+            </Routes>
-                </Route>
-                <Route path="/manga/:mangaId/chapter/:chapterNum" />
-                <Route path="/manga/:id">
-                    <Manga />
-                </Route>
-                <Route path="/library">
-                    <Library />
-                </Route>
-                <Route path="/updates">
-                    <Updates />
-                </Route>
-                <Route path="/sources">
-                    <Sources />
-                </Route>
-                <Route path="/extensions">
-                    <Extensions />
-                </Route>
-                <Route path="/browse">
-                    <Browse />
-                </Route>
-            </Switch>
         </Container>
-        <Switch>
+        <Routes>
-            <Route
+            <Route path="manga/:mangaId/chapter/:chapterIndex" element={<Reader />} />
-                path="/manga/:mangaId/chapter/:chapterIndex"
+            <Route path="*" element={null} />
-                // passing a key re-mounts the reader
+        </Routes>
-                // when changing chapters
-                render={(props: any) => <Reader key={props.match.params.chapterIndex} />}
-            />
-        </Switch>
     </AppContext>
 );
 

src/components/SourceCard.tsx

@@ -55,10 +55,7 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
                 margin: '10px',
             }}
         >
-            <CardActionArea
+            <CardActionArea component={Link} to={`/sources/${id}`} state={{ contentType: SourceContentType.POPULAR }}>
-                component={Link}
-                to={{ pathname: `/sources/${id}`, state: { contentType: SourceContentType.POPULAR } }}
-            >
                 <CardContent
                     sx={{
                         display: 'flex',
@@ -107,10 +104,8 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
                                 <Button
                                     variant="outlined"
                                     component={Link}
-                                    to={{
+                                    to={`/sources/${id}`}
-                                        pathname: `/sources/${id}`,
+                                    state={{ contentType: SourceContentType.LATEST }}
-                                        state: { contentType: SourceContentType.LATEST },
-                                    }}
                                 >
                                     {t('global.button.latest')}
                                 </Button>
@@ -121,10 +116,8 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
                                 <Button
                                     variant="outlined"
                                     component={Link}
-                                    to={{
+                                    to={`/sources/${id}`}
-                                        pathname: `/sources/${id}`,
+                                    state={{ contentType: SourceContentType.LATEST }}
-                                        state: { contentType: SourceContentType.LATEST },
-                                    }}
                                 >
                                     {t('global.button.latest')}
                                 </Button>
@@ -132,7 +125,8 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
                             <Button
                                 variant="outlined"
                                 component={Link}
-                                to={{ pathname: `/sources/${id}`, state: { contentType: SourceContentType.POPULAR } }}
+                                to={`/sources/${id}`}
+                                state={{ contentType: SourceContentType.POPULAR }}
                             >
                                 {t('global.button.popular')}
                             </Button>

src/components/context/AppContext.tsx

@@ -16,7 +16,7 @@ import createTheme from 'theme';
 import { QueryParamProvider } from 'use-query-params';
 import useLocalStorage from 'util/useLocalStorage';
 import DarkTheme from 'components/context/DarkTheme';
-import { ReactRouter5Adapter } from 'use-query-params/adapters/react-router-5';
+import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
 
 interface Props {
     children: React.ReactNode;
@@ -41,7 +41,7 @@ const AppContext: React.FC<Props> = ({ children }) => {
                 <StyledEngineProvider injectFirst>
                     <ThemeProvider theme={theme}>
                         <DarkTheme.Provider value={darkThemeContext}>
-                            <QueryParamProvider adapter={ReactRouter5Adapter}>
+                            <QueryParamProvider adapter={ReactRouter6Adapter}>
                                 <LibraryOptionsContextProvider>
                                     <NavBarContextProvider>{children}</NavBarContextProvider>
                                 </LibraryOptionsContextProvider>

src/components/manga/ChapterCard.tsx

@@ -112,10 +112,8 @@ const ChapterCard: React.FC<IProps> = (props: IProps) => {
             >
                 <CardActionArea
                     component={Link}
-                    to={{
+                    to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
-                        pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`,
+                    state={{ backLink: BACK }}
-                        state: { backLink: BACK },
-                    }}
                     style={{
                         color: theme.palette.text[chapter.read ? 'disabled' : 'primary'],
                     }}

src/components/manga/ResumeFAB.tsx

@@ -31,10 +31,8 @@ export default function ResumeFab(props: ResumeFABProps) {
             component={Link}
             variant="extended"
             color="primary"
-            to={{
+            to={`/manga/${mangaId}/chapter/${index}/page/${lastPageRead}`}
-                pathname: `/manga/${mangaId}/chapter/${index}/page/${lastPageRead}`,
+            state={{ backLink: BACK }}
-                state: { backLink: BACK },
-            }}
         >
             <PlayArrow />
             {index === 1 ? t('global.button.start') : t('global.button.resume')}

src/components/navbar/DefaultNavBar.tsx

@@ -11,7 +11,7 @@ import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import IconButton from '@mui/material/IconButton';
-import { useMediaQuery, Box } from '@mui/material';
+import { Box, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import CollectionsBookmarkIcon from '@mui/icons-material/CollectionsBookmark';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
@@ -24,7 +24,7 @@ import GetAppIcon from '@mui/icons-material/GetApp';
 import GetAppOutlinedIcon from '@mui/icons-material/GetAppOutlined';
 import SettingsIcon from '@mui/icons-material/Settings';
 import ArrowBack from '@mui/icons-material/ArrowBack';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import NavBarContext from 'components/context/NavbarContext';
 import ExtensionOutlinedIcon from 'components/util/CustomExtensionOutlinedIcon';
 import { createPortal } from 'react-dom';
@@ -90,10 +90,11 @@ export default function DefaultNavBar() {
     const backTo = useBackTo();
 
     const theme = useTheme();
-    const history = useHistory();
+    const navigate = useNavigate();
+    const { pathname } = useLocation();
 
     const isMobileWidth = useMediaQuery(theme.breakpoints.down('sm'));
-    const isMainRoute = navbarItems.some(({ path }) => path === history.location.pathname);
+    const isMainRoute = navbarItems.some(({ path }) => path === pathname);
 
     // Allow default navbar to be overrided
     if (override.status) return override.value;
@@ -109,7 +110,7 @@ export default function DefaultNavBar() {
 
     const handleBack = () => {
         if (backTo.url != null) return;
-        history.goBack();
+        navigate(-1);
     };
 
     return (

src/components/navbar/ReaderNavBar.tsx

@@ -14,7 +14,7 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import React, { useEffect, useState } from 'react';
 import Typography from '@mui/material/Typography';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
 import Fade from '@mui/material/Fade';
 import Zoom from '@mui/material/Zoom';
@@ -125,7 +125,7 @@ interface IProps {
 
 export default function ReaderNavBar(props: IProps) {
     const { t } = useTranslation();
-    const history = useHistory();
+    const navigate = useNavigate();
     const backTo = useBackTo();
     const location = useLocation<{
         prevDrawerOpen?: boolean;
@@ -188,9 +188,9 @@ export default function ReaderNavBar(props: IProps) {
     }, [handleScroll]); // handleScroll changes on every render
 
     const handleClose = () => {
-        if (backTo.back) history.goBack();
+        if (backTo.back) navigate(-1);
-        else if (backTo.url) history.push(backTo.url);
+        else if (backTo.url) navigate(backTo.url);
-        else history.push(`/manga/${manga.id}`);
+        else navigate(`/manga/${manga.id}`);
     };
 
     return (
@@ -300,8 +300,8 @@ export default function ReaderNavBar(props: IProps) {
                                 disabled={disableChapterNavButtons || chapter.index <= 1}
                                 onClick={() =>
                                     openNextChapter(ChapterOffset.PREV, (prevChapterIndex) => {
-                                        history.replace({
+                                        navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
-                                            pathname: `/manga/${manga.id}/chapter/${prevChapterIndex}`,
+                                            replace: true,
                                             state: {
                                                 prevDrawerOpen: drawerOpen,
                                                 prevSettingsCollapseOpen: settingsCollapseOpen,
@@ -322,8 +322,8 @@ export default function ReaderNavBar(props: IProps) {
                                     value={chapter.index >= 1 ? chapter.index : ''}
                                     displayEmpty
                                     onChange={({ target: { value: selectedChapter } }) => {
-                                        history.replace({
+                                        navigate(`/manga/${manga.id}/chapter/${selectedChapter}`, {
-                                            pathname: `/manga/${manga.id}/chapter/${selectedChapter}`,
+                                            replace: true,
                                             state: {
                                                 prevDrawerOpen: drawerOpen,
                                                 prevSettingsCollapseOpen: settingsCollapseOpen,
@@ -350,8 +350,8 @@ export default function ReaderNavBar(props: IProps) {
                                 }
                                 onClick={() => {
                                     openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
-                                        history.replace({
+                                        navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
-                                            pathname: `/manga/${manga.id}/chapter/${nextChapterIndex}`,
+                                            replace: true,
                                             state: {
                                                 prevDrawerOpen: drawerOpen,
                                                 prevSettingsCollapseOpen: settingsCollapseOpen,

src/screens/DownloadQueue.tsx

@@ -118,10 +118,8 @@ const DownloadQueue: React.FC = () => {
                                             >
                                                 <CardActionArea
                                                     component={Link}
-                                                    to={{
+                                                    to={`/manga/${item.chapter.mangaId}`}
-                                                        pathname: `/manga/${item.chapter.mangaId}`,
+                                                    state={{ backLink: BACK }}
-                                                        state: { backLink: BACK },
-                                                    }}
                                                     sx={{
                                                         display: 'flex',
                                                         alignItems: 'center',

src/screens/Reader.tsx

@@ -8,7 +8,7 @@
 
 import CircularProgress from '@mui/material/CircularProgress';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import HorizontalPager from 'components/reader/pager/HorizontalPager';
 import PageNumber from 'components/reader/PageNumber';
 import PagedPager from 'components/reader/pager/PagedPager';
@@ -89,7 +89,8 @@ const initialChapter = {
 
 export default function Reader() {
     const { t } = useTranslation();
-    const history = useHistory();
+    const navigate = useNavigate();
+    const location = useLocation();
 
     const { chapterIndex, mangaId } = useParams<{ chapterIndex: string; mangaId: string }>();
     const {
@@ -214,9 +215,9 @@ export default function Reader() {
             });
 
             openNextChapter(ChapterOffset.NEXT, (nextChapterIndex) =>
-                history.replace({
+                navigate(`/manga/${manga.id}/chapter/${nextChapterIndex}`, {
-                    pathname: `/manga/${manga.id}/chapter/${nextChapterIndex}`,
+                    replace: true,
-                    state: history.location.state,
+                    state: location.state,
                 }),
             );
         }
@@ -225,9 +226,9 @@ export default function Reader() {
     const prevChapter = useCallback(() => {
         if (chapter.index > 1) {
             openNextChapter(ChapterOffset.PREV, (prevChapterIndex) =>
-                history.replace({
+                navigate(`/manga/${manga.id}/chapter/${prevChapterIndex}`, {
-                    pathname: `/manga/${manga.id}/chapter/${prevChapterIndex}`,
+                    replace: true,
-                    state: history.location.state,
+                    state: location.state,
                 }),
             );
         }

src/screens/SourceMangas.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { useParams, useHistory } from 'react-router-dom';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import IconButton from '@mui/material/IconButton';
 import SourceMangaGrid from 'components/source/SourceMangaGrid';
 import NavbarContext from 'components/context/NavbarContext';
@@ -162,8 +162,10 @@ export default function SourceMangas() {
 
     const { sourceId } = useParams<{ sourceId: string }>();
 
-    const history = useHistory<{ contentType: SourceContentType }>();
+    const navigate = useNavigate();
-    const { contentType: currentLocationContentType = SourceContentType.POPULAR } = history.location.state ?? {};
+    const { state: { contentType: currentLocationContentType = SourceContentType.POPULAR } = {} } = useLocation<{
+        contentType: SourceContentType;
+    }>();
 
     const { options } = useLibraryOptionsContext();
     const [query] = useQueryParam('query', StringParam);
@@ -233,7 +235,7 @@ export default function SourceMangas() {
 
     const updateContentType = useCallback(
         (newContentType: SourceContentType) => {
-            history.replace(sourceId, { contentType: newContentType });
+            navigate('', { replace: true, state: { contentType: newContentType } });
             setContentType(newContentType);
         },
         [setContentType],
@@ -267,7 +269,7 @@ export default function SourceMangas() {
                 <SourceGridLayout />
                 {source?.isConfigurable && (
                     <IconButton
-                        onClick={() => history.push(`/sources/${sourceId}/configure/`)}
+                        onClick={() => navigate(`/sources/${sourceId}/configure/`)}
                         aria-label="display more actions"
                         edge="end"
                         color="inherit"

src/screens/Sources.tsx

@@ -15,7 +15,7 @@ import useLocalStorage from 'util/useLocalStorage';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import { IconButton } from '@mui/material';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { ISource } from 'typings';
 import { useTranslation } from 'react-i18next';
 import { translateExtensionLanguage } from 'screens/util/Extensions';
@@ -55,7 +55,7 @@ export default function Sources() {
 
     const { data: sources, isLoading } = requestManager.useGetSourceList();
 
-    const history = useHistory();
+    const navigate = useNavigate();
 
     useEffect(() => {
         // make sure all of forcedDefaultLangs() exists in shownLangs
@@ -77,7 +77,7 @@ export default function Sources() {
         setTitle(t('source.title'));
         setAction(
             <>
-                <IconButton onClick={() => history.push('/sources/all/search/')} size="large">
+                <IconButton onClick={() => navigate('/sources/all/search/')} size="large">
                     <TravelExploreIcon />
                 </IconButton>
                 <LangSelect

src/screens/Updates.tsx

@@ -18,7 +18,7 @@ import DownloadStateIndicator from 'components/molecules/DownloadStateIndicator'
 import EmptyView from 'components/util/EmptyView';
 import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { IChapter, IMangaChapter, IQueue } from 'typings';
 import { useTranslation } from 'react-i18next';
 import { t as translate } from 'i18next';
@@ -102,7 +102,7 @@ const initialQueue = {
 
 const Updates: React.FC = () => {
     const { t } = useTranslation();
-    const history = useHistory();
+    const location = useLocation();
 
     const { setTitle, setAction } = useContext(NavbarContext);
     const {
@@ -187,10 +187,8 @@ const Updates: React.FC = () => {
                         <Card>
                             <CardActionArea
                                 component={Link}
-                                to={{
+                                to={`/manga/${chapter.mangaId}/chapter/${chapter.index}`}
-                                    pathname: `/manga/${chapter.mangaId}/chapter/${chapter.index}`,
+                                state={location.state}
-                                    state: history.location.state,
-                                }}
                             >
                                 <CardContent
                                     sx={{

src/typings.ts

@@ -9,6 +9,15 @@
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 import { SvgIconTypeMap } from '@mui/material/SvgIcon/SvgIcon';
 import { TFuncKey } from 'i18next';
+import { Location } from 'react-router-dom';
+
+type GenericLocation<State = any> = Omit<Location, 'state'> & { state?: State };
+
+declare module 'react-router-dom' {
+    export function useParams<Params extends { [K in keyof Params]: string } = {}>(): Params;
+
+    export function useLocation<State = any>(): GenericLocation<State>;
+}
 
 export type TranslationKey = TFuncKey;
 

yarn.lock

@@ -1823,7 +1823,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -2625,6 +2625,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
+"@remix-run/router@1.6.2":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.6.2.tgz#bbe75f8c59e0b7077584920ce2cc76f8f354934d"
+  integrity sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
@@ -2940,11 +2945,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/history@*":
-  version "4.7.9"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724"
-  integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==
-
 "@types/hoist-non-react-statics@^3.3.0":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -3075,23 +3075,6 @@
     hoist-non-react-statics "^3.3.0"
     redux "^4.0.0"
 
-"@types/react-router-dom@^5.1.7":
-  version "5.1.8"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
-  integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*":
-  version "5.1.16"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99"
-  integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
-
 "@types/react-transition-group@^4.4.6":
   version "4.4.6"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e"
@@ -6187,19 +6170,7 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-history@^4.9.0:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
-  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"
-
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6732,11 +6703,6 @@ is-wsl@^2.2.0:
   dependencies:
     is-docker "^2.0.0"
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
@@ -7576,7 +7542,7 @@ lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7722,14 +7688,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mini-create-react-context@^0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz#072171561bfdc922da08a60c2197a497cc2d1d5e"
-  integrity sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==
-  dependencies:
-    "@babel/runtime" "^7.12.1"
-    tiny-warning "^1.0.3"
-
 mini-css-extract-plugin@^2.4.5:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.2.tgz#e049d3ea7d3e4e773aad585c6cb329ce0c7b72d7"
@@ -8193,13 +8151,6 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
-path-to-regexp@^1.7.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
-  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
-  dependencies:
-    isarray "0.0.1"
-
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -9075,7 +9026,7 @@ react-i18next@^12.3.1:
     "@babel/runtime" "^7.20.6"
     html-parse-stringify "^3.0.1"
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -9107,34 +9058,20 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-react-router-dom@^5.2.0:
+react-router-dom@^6.11.2:
-  version "5.3.0"
+  version "6.11.2"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.0.tgz#da1bfb535a0e89a712a93b97dd76f47ad1f32363"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.11.2.tgz#324d55750ffe2ecd54ca4ec6b7bc7ab01741f170"
-  integrity sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==
+  integrity sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==
   dependencies:
-    "@babel/runtime" "^7.12.13"
+    "@remix-run/router" "1.6.2"
-    history "^4.9.0"
+    react-router "6.11.2"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-router "5.2.1"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
 
-react-router@5.2.1:
+react-router@6.11.2:
-  version "5.2.1"
+  version "6.11.2"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.11.2.tgz#006301c4da1a173d7ad76b7ecd2da01b9dd3837a"
-  integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==
+  integrity sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==
   dependencies:
-    "@babel/runtime" "^7.12.13"
+    "@remix-run/router" "1.6.2"
-    history "^4.9.0"
-    hoist-non-react-statics "^3.1.0"
-    loose-envify "^1.3.1"
-    mini-create-react-context "^0.4.0"
-    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"
 
 react-scripts@^5.0.1:
   version "5.0.1"
@@ -9426,11 +9363,6 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve-pathname@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
-  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
 resolve-url-loader@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-4.0.0.tgz#d50d4ddc746bb10468443167acf800dcd6c3ad57"
@@ -10254,16 +10186,11 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
-tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
+tiny-invariant@^1.0.6:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
 tmpl@1.0.x:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -10573,11 +10500,6 @@ v8-to-istanbul@^8.1.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
-value-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
-  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"