diff --git a/src/app/services/provideServices.ts b/src/app/services/provideServices.ts
index 752c1cc3..50bb8f12 100644
--- a/src/app/services/provideServices.ts
+++ b/src/app/services/provideServices.ts
@@ -1,9 +1,9 @@
-import Bottle, { Decorator } from 'bottlejs';
+import Bottle from 'bottlejs';
import { appUpdateAvailable, resetAppUpdate } from '../reducers/appUpdates';
import App from '../App';
import { ConnectDecorator } from '../../container/types';
-const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
+const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
// Components
bottle.serviceFactory(
'App',
@@ -18,7 +18,6 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
'ShlinkVersionsContainer',
);
bottle.decorator('App', connect([ 'servers', 'settings', 'appUpdated' ], [ 'fetchServers', 'resetAppUpdate' ]));
- bottle.decorator('App', withRouter);
// Actions
bottle.serviceFactory('appUpdateAvailable', () => appUpdateAvailable);
diff --git a/src/common/AsideMenu.tsx b/src/common/AsideMenu.tsx
index 9c086e27..08ed301d 100644
--- a/src/common/AsideMenu.tsx
+++ b/src/common/AsideMenu.tsx
@@ -8,9 +8,8 @@ import {
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react';
-import { NavLink, NavLinkProps } from 'react-router-dom';
+import { NavLink, NavLinkProps, useLocation } 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
= ({ children, to, className, ...rest }) => (
classNames('aside-menu__item', className, { 'aside-menu__item--selected': isActive })}
to={to}
{...rest}
>
@@ -42,11 +40,11 @@ const AsideMenu = (DeleteServerButton: FC) => (
) => {
const hasId = isServerWithId(selectedServer);
const serverId = hasId ? selectedServer.id : '';
+ const { pathname } = useLocation();
const addManageDomainsLink = supportsDomainRedirects(selectedServer);
const asideClass = classNames('aside-menu', {
'aside-menu--hidden': !showOnMobile,
});
- const shortUrlsIsActive = (_: null, location: Location) => location.pathname.match('/list-short-urls') !== null;
const buildPath = (suffix: string) => `/server/${serverId}${suffix}`;
return (
@@ -56,7 +54,10 @@ const AsideMenu = (DeleteServerButton: FC) => (
Overview
-
+
List short URLs
diff --git a/src/common/Home.tsx b/src/common/Home.tsx
index 2ca4f42d..6869c7ab 100644
--- a/src/common/Home.tsx
+++ b/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 (
diff --git a/src/common/MainHeader.tsx b/src/common/MainHeader.tsx
index 245a0499..4ce52d68 100644
--- a/src/common/MainHeader.tsx
+++ b/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 ]);
diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx
index 2c1c146e..567587b4 100644
--- a/src/common/MenuLayout.tsx
+++ b/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 = (
hideSidebar()}>
-
-
-
-
-
-
-
-
- {addOrphanVisitsRoute && }
- {addNonOrphanVisitsRoute && }
-
- {addManageDomainsRoute && }
+
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ } />
+ {addOrphanVisitsRoute && } />}
+ {addNonOrphanVisitsRoute && } />}
+ } />
+ {addManageDomainsRoute && } />}
List short URLs}
+ path="*"
+ element={List short URLs}
/>
-
+
diff --git a/src/common/ScrollToTop.tsx b/src/common/ScrollToTop.tsx
index 8343b62e..66c23665 100644
--- a/src/common/ScrollToTop.tsx
+++ b/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