Updated source code to react-router 6

src/common/AsideMenu.tsx

@@ -10,7 +10,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
 import classNames from 'classnames';
-import { Location } from 'history';
 import { DeleteServerButtonProps } from '../servers/DeleteServerButton';
 import { isServerWithId, SelectedServer } from '../servers/data';
 import { supportsDomainRedirects } from '../utils/helpers/features';
@@ -28,8 +27,7 @@ interface AsideMenuItemProps extends NavLinkProps {
 
 const AsideMenuItem: FC<AsideMenuItemProps> = ({ children, to, className, ...rest }) => (
   <NavLink
-    className={classNames('aside-menu__item', className)}
-    activeClassName="aside-menu__item--selected"
+    className={({ isActive }) => classNames('aside-menu__item', className, { 'aside-menu__item--selected': isActive })}
     to={to}
     {...rest}
   >
@@ -46,7 +44,8 @@ const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
   const asideClass = classNames('aside-menu', {
     'aside-menu--hidden': !showOnMobile,
   });
-  const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null;
+  // TODO
+  // const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null;
   const buildPath = (suffix: string) => `/server/${serverId}${suffix}`;
 
   return (
@@ -56,7 +55,7 @@ const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
           <FontAwesomeIcon fixedWidth icon={overviewIcon} />
           <span className="aside-menu__item-text">Overview</span>
         </AsideMenuItem>
-        <AsideMenuItem to={buildPath('/list-short-urls/1')} isActive={shortUrlsIsActive}>
+        <AsideMenuItem to={buildPath('/list-short-urls/1')}>
           <FontAwesomeIcon fixedWidth icon={listIcon} />
           <span className="aside-menu__item-text">List short URLs</span>
         </AsideMenuItem>

src/common/Home.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { isEmpty, values } from 'ramda';
-import { Link, RouteChildrenProps } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Card, Row } from 'reactstrap';
 import { ExternalLink } from 'react-external-link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -10,11 +10,12 @@ import { ServersMap } from '../servers/data';
 import { ShlinkLogo } from './img/ShlinkLogo';
 import './Home.scss';
 
-export interface HomeProps extends RouteChildrenProps {
+export interface HomeProps {
   servers: ServersMap;
 }
 
-const Home = ({ servers, history }: HomeProps) => {
+const Home = ({ servers }: HomeProps) => {
+  const navigate = useNavigate();
   const serversList = values(servers);
   const hasServers = !isEmpty(serversList);
 
@@ -22,7 +23,7 @@ const Home = ({ servers, history }: HomeProps) => {
     // Try to redirect to the first server marked as auto-connect
     const autoConnectServer = serversList.find(({ autoConnect }) => autoConnect);
 
-    autoConnectServer && history.push(`/server/${autoConnectServer.id}`);
+    autoConnectServer && navigate(`/server/${autoConnectServer.id}`);
   }, []);
 
   return (

src/common/MainHeader.tsx

@@ -1,16 +1,16 @@
 import { faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
 import classNames from 'classnames';
-import { RouteComponentProps } from 'react-router';
 import { useToggle } from '../utils/helpers/hooks';
 import { ShlinkLogo } from './img/ShlinkLogo';
 import './MainHeader.scss';
 
-const MainHeader = (ServersDropdown: FC) => ({ location }: RouteComponentProps) => {
+const MainHeader = (ServersDropdown: FC) => () => {
   const [ isOpen, toggleOpen, , close ] = useToggle();
+  const location = useLocation();
   const { pathname } = location;
 
   useEffect(close, [ location ]);

src/common/MenuLayout.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect } from 'react';
-import { Redirect, Route, Switch } from 'react-router-dom';
+import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
@@ -24,7 +24,8 @@ const MenuLayout = (
   Overview: FC,
   EditShortUrl: FC,
   ManageDomains: FC,
-) => withSelectedServer(({ location, selectedServer }) => {
+) => withSelectedServer(({ selectedServer }) => {
+  const location = useLocation();
   const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
 
   useEffect(() => hideSidebar(), [ location ]);
@@ -48,22 +49,23 @@ const MenuLayout = (
           <AsideMenu selectedServer={selectedServer} showOnMobile={sidebarVisible} />
           <div className="menu-layout__container" onClick={() => hideSidebar()}>
             <div className="container-xl">
-              <Switch>
-                <Redirect exact from="/server/:serverId" to="/server/:serverId/overview" />
-                <Route exact path="/server/:serverId/overview" component={Overview} />
-                <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrlsList} />
-                <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
-                <Route path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
-                <Route path="/server/:serverId/short-code/:shortCode/edit" component={EditShortUrl} />
-                <Route path="/server/:serverId/tag/:tag/visits" component={TagVisits} />
-                {addOrphanVisitsRoute && <Route path="/server/:serverId/orphan-visits" component={OrphanVisits} />}
-                {addNonOrphanVisitsRoute && <Route path="/server/:serverId/non-orphan-visits" component={NonOrphanVisits} />}
-                <Route exact path="/server/:serverId/manage-tags" component={TagsList} />
-                {addManageDomainsRoute && <Route exact path="/server/:serverId/manage-domains" component={ManageDomains} />}
+              <Routes>
+                <Route index element={<Navigate replace to="overview" />} />
+                <Route path="/overview" element={<Overview />} />
+                <Route path="/list-short-urls/:page" element={<ShortUrlsList />} />
+                <Route path="/create-short-url" element={<CreateShortUrl />} />
+                <Route path="/short-code/:shortCode/visits/*" element={<ShortUrlVisits />} />
+                <Route path="/short-code/:shortCode/edit" element={<EditShortUrl />} />
+                <Route path="/tag/:tag/visits/*" element={<TagVisits />} />
+                {addOrphanVisitsRoute && <Route path="/orphan-visits/*" element={<OrphanVisits />} />}
+                {addNonOrphanVisitsRoute && <Route path="/non-orphan-visits/*" element={<NonOrphanVisits />} />}
+                <Route path="/manage-tags" element={<TagsList />} />
+                {addManageDomainsRoute && <Route path="/manage-domains" element={<ManageDomains />} />}
                 <Route
-                  render={() => <NotFound to={`/server/${selectedServer.id}/list-short-urls/1`}>List short URLs</NotFound>}
+                  path="*"
+                  element={<NotFound to={`/server/${selectedServer.id}/list-short-urls/1`}>List short URLs</NotFound>}
                 />
-              </Switch>
+              </Routes>
             </div>
           </div>
         </div>

src/common/ScrollToTop.tsx

@@ -1,7 +1,9 @@
-import { PropsWithChildren, useEffect } from 'react';
-import { RouteComponentProps } from 'react-router';
+import { FC, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+const ScrollToTop = (): FC => ({ children }) => {
+  const location = useLocation();
 
-const ScrollToTop = () => ({ location, children }: PropsWithChildren<RouteComponentProps>) => {
   useEffect(() => {
     scrollTo(0, 0);
   }, [ location ]);

src/common/services/provideServices.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import Bottle, { Decorator } from 'bottlejs';
+import Bottle from 'bottlejs';
 import ScrollToTop from '../ScrollToTop';
 import MainHeader from '../MainHeader';
 import Home from '../Home';
@@ -11,7 +11,7 @@ import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../../servers/helpers/withoutSelectedServer';
 import { ImageDownloader } from './ImageDownloader';
 
-const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
+const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   // Services
   bottle.constant('window', (global as any).window);
   bottle.constant('console', global.console);
@@ -21,14 +21,11 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
 
   // Components
   bottle.serviceFactory('ScrollToTop', ScrollToTop);
-  bottle.decorator('ScrollToTop', withRouter);
 
   bottle.serviceFactory('MainHeader', MainHeader, 'ServersDropdown');
-  bottle.decorator('MainHeader', withRouter);
 
   bottle.serviceFactory('Home', () => Home);
   bottle.decorator('Home', withoutSelectedServer);
-  bottle.decorator('Home', withRouter);
   bottle.decorator('Home', connect([ 'servers' ], [ 'resetSelectedServer' ]));
 
   bottle.serviceFactory(
@@ -48,7 +45,6 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
     'ManageDomains',
   );
   bottle.decorator('MenuLayout', connect([ 'selectedServer' ], [ 'selectServer' ]));
-  bottle.decorator('MenuLayout', withRouter);
 
   bottle.serviceFactory('AsideMenu', AsideMenu, 'DeleteServerButton');