Updated source code to react-router 6

src/servers/CreateServer.tsx

@@ -1,10 +1,10 @@
 import { FC, useEffect, useState } from 'react';
 import { v4 as uuid } from 'uuid';
-import { RouterProps } from 'react-router';
 import { Button } from 'reactstrap';
+import { useNavigate } from 'react-router-dom';
 import { Result } from '../utils/Result';
 import { NoMenuLayout } from '../common/NoMenuLayout';
-import { StateFlagTimeout, useToggle } from '../utils/helpers/hooks';
+import { StateFlagTimeout, useGoBack, useToggle } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
 import { ImportServersBtnProps } from './helpers/ImportServersBtn';
 import { ServerData, ServersMap, ServerWithId } from './data';
@@ -12,7 +12,7 @@ import { DuplicatedServersModal } from './helpers/DuplicatedServersModal';
 
 const SHOW_IMPORT_MSG_TIME = 4000;
 
-interface CreateServerProps extends RouterProps {
+interface CreateServerProps {
   createServer: (server: ServerWithId) => void;
   servers: ServersMap;
 }
@@ -27,8 +27,10 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
 );
 
 const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
-  { servers, createServer, history: { push, goBack } }: CreateServerProps,
+  { servers, createServer }: CreateServerProps,
 ) => {
+  const navigate = useNavigate();
+  const goBack = useGoBack();
   const hasServers = !!Object.keys(servers).length;
   const [ serversImported, setServersImported ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
   const [ errorImporting, setErrorImporting ] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
@@ -42,7 +44,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
     const id = uuid();
 
     createServer({ ...serverData, id });
-    push(`/server/${id}`);
+    navigate(`/server/${id}`);
   };
 
   useEffect(() => {

src/servers/DeleteServerModal.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
-import { RouterProps } from 'react-router';
+import { useNavigate } from 'react-router-dom';
 import { ServerWithId } from './data';
 
 export interface DeleteServerModalProps {
@@ -10,17 +10,18 @@ export interface DeleteServerModalProps {
   redirectHome?: boolean;
 }
 
-interface DeleteServerModalConnectProps extends DeleteServerModalProps, RouterProps {
+interface DeleteServerModalConnectProps extends DeleteServerModalProps {
   deleteServer: (server: ServerWithId) => void;
 }
 
 const DeleteServerModal: FC<DeleteServerModalConnectProps> = (
-  { server, toggle, isOpen, deleteServer, history, redirectHome = true },
+  { server, toggle, isOpen, deleteServer, redirectHome = true },
 ) => {
+  const navigate = useNavigate();
   const closeModal = () => {
     deleteServer(server);
     toggle();
-    redirectHome && history.push('/');
+    redirectHome && navigate('/');
   };
 
   return (

src/servers/EditServer.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react';
 import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
+import { useGoBack } from '../utils/helpers/hooks';
 import { ServerForm } from './helpers/ServerForm';
 import { withSelectedServer } from './helpers/withSelectedServer';
 import { isServerWithId, ServerData } from './data';
@@ -9,9 +10,9 @@ interface EditServerProps {
   editServer: (serverId: string, serverData: ServerData) => void;
 }
 
-export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProps>((
-  { editServer, selectedServer, history: { goBack } },
-) => {
+export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProps>(({ editServer, selectedServer }) => {
+  const goBack = useGoBack();
+
   if (!isServerWithId(selectedServer)) {
     return null;
   }

src/servers/Overview.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect } from 'react';
 import { Card, CardBody, CardHeader, Row } from 'reactstrap';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { ITEMS_IN_OVERVIEW_PAGE, ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
 import { prettify } from '../utils/helpers/numbers';
 import { TagsList } from '../tags/reducers/tagsList';
@@ -44,7 +44,7 @@ export const Overview = (
   const serverId = getServerId(selectedServer);
   const linkToOrphanVisits = supportsOrphanVisits(selectedServer);
   const linkToNonOrphanVisits = supportsNonOrphanVisits(selectedServer);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   useEffect(() => {
     listShortUrls({ itemsPerPage: ITEMS_IN_OVERVIEW_PAGE, orderBy: { field: 'dateCreated', dir: 'DESC' } });
@@ -103,7 +103,7 @@ export const Overview = (
             shortUrlsList={shortUrlsList}
             selectedServer={selectedServer}
             className="mb-0"
-            onTagClick={(tag) => history.push(`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag)}`)}
+            onTagClick={(tag) => navigate(`/server/${serverId}/list-short-urls/1?tags=${encodeURIComponent(tag)}`)}
           />
         </CardBody>
       </Card>

src/servers/helpers/withSelectedServer.tsx

@@ -1,21 +1,22 @@
 import { FC, useEffect } from 'react';
-import { RouteComponentProps } from 'react-router';
+import { useParams } from 'react-router-dom';
 import Message from '../../utils/Message';
 import { isNotFoundServer, SelectedServer } from '../data';
 import { NoMenuLayout } from '../../common/NoMenuLayout';
 
-interface WithSelectedServerProps extends RouteComponentProps<{ serverId: string }> {
+interface WithSelectedServerProps {
   selectServer: (serverId: string) => void;
   selectedServer: SelectedServer;
 }
 
 export function withSelectedServer<T = {}>(WrappedComponent: FC<WithSelectedServerProps & T>, ServerError: FC) {
   return (props: WithSelectedServerProps & T) => {
-    const { selectServer, selectedServer, match } = props;
+    const params = useParams<{ serverId: string }>();
+    const { selectServer, selectedServer } = props;
 
     useEffect(() => {
-      selectServer(match.params.serverId);
-    }, [ match.params.serverId ]);
+      params.serverId && selectServer(params.serverId);
+    }, [ params.serverId ]);
 
     if (!selectedServer) {
       return (

src/servers/services/provideServices.ts

@@ -1,5 +1,5 @@
 import csvjson from 'csvjson';
-import Bottle, { Decorator } from 'bottlejs';
+import Bottle from 'bottlejs';
 import CreateServer from '../CreateServer';
 import ServersDropdown from '../ServersDropdown';
 import DeleteServerModal from '../DeleteServerModal';
@@ -20,7 +20,7 @@ import { ManageServersRowDropdown } from '../ManageServersRowDropdown';
 import { ServersImporter } from './ServersImporter';
 import ServersExporter from './ServersExporter';
 
-const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
+const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Components
   bottle.serviceFactory(
     'ManageServers',
@@ -48,7 +48,6 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.decorator('ServersDropdown', connect([ 'servers', 'selectedServer' ]));
 
   bottle.serviceFactory('DeleteServerModal', () => DeleteServerModal);
-  bottle.decorator('DeleteServerModal', withRouter);
   bottle.decorator('DeleteServerModal', connect(null, [ 'deleteServer' ]));
 
   bottle.serviceFactory('DeleteServerButton', DeleteServerButton, 'DeleteServerModal');