Use React Router hook for 'history'

app/soapbox/components/account.tsx

@@ -119,7 +119,7 @@ const Account = ({
     );
   }
 
-  const LinkEl = showProfileHoverCard ? Link : 'div';
+  const LinkEl: any = showProfileHoverCard ? Link : 'div';
 
   return (
     <div className='flex-shrink-0 group block w-full overflow-hidden' ref={overflowRef}>
@@ -132,7 +132,7 @@ const Account = ({
             <LinkEl
               to={`/@${account.get('acct')}`}
               title={account.get('acct')}
-              onClick={(event) => event.stopPropagation()}
+              onClick={(event: React.MouseEvent) => event.stopPropagation()}
             >
               <Avatar src={account.get('avatar')} size={avatarSize} />
             </LinkEl>
@@ -146,7 +146,7 @@ const Account = ({
               <LinkEl
                 to={`/@${account.get('acct')}`}
                 title={account.get('acct')}
-                onClick={(event) => event.stopPropagation()}
+                onClick={(event: React.MouseEvent) => event.stopPropagation()}
               >
                 <div className='flex items-center space-x-1 flex-grow' style={style}>
                   <Text

app/soapbox/components/profile_hover_card.js

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { useIntl } from 'react-intl';
 import { usePopper } from 'react-popper';
 import { useSelector, useDispatch } from 'react-redux';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import { fetchRelationships } from 'soapbox/actions/accounts';
 import {
@@ -52,8 +52,9 @@ const handleMouseLeave = (dispatch) => {
   };
 };
 
-export const ProfileHoverCard = ({ history, visible }) => {
+export const ProfileHoverCard = ({ visible }) => {
   const dispatch = useDispatch();
+  const history = useHistory();
   const intl = useIntl();
 
   const [popperElement, setPopperElement] = useState(null);
@@ -134,11 +135,10 @@ ProfileHoverCard.propTypes = {
   visible: PropTypes.bool,
   accountId: PropTypes.string,
   account: ImmutablePropTypes.map,
-  history: PropTypes.object.isRequired,
 };
 
 ProfileHoverCard.defaultProps = {
   visible: true,
 };
 
-export default withRouter(ProfileHoverCard);
+export default ProfileHoverCard;

app/soapbox/components/ui/column/column.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import Helmet from 'soapbox/components/helmet';
 
 import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
 
-interface IColumn extends RouteComponentProps {
+interface IColumn {
   backHref?: string,
   label?: string,
   transparent?: boolean,
@@ -13,7 +13,9 @@ interface IColumn extends RouteComponentProps {
 }
 
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, history, transparent = false, withHeader = true } = props;
+  const { backHref, children, label, transparent = false, withHeader = true } = props;
+
+  const history = useHistory();
 
   const handleBackClick = () => {
     if (backHref) {
@@ -57,4 +59,4 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
   );
 });
 
-export default withRouter(Column);
+export default Column;

app/soapbox/components/ui/tabs/tabs.tsx

@@ -7,7 +7,7 @@ import {
 } from '@reach/tabs';
 import classNames from 'classnames';
 import * as React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
 import './tabs.css';
 
@@ -87,14 +87,16 @@ type Item = {
   action?: () => void,
   name: string
 }
-interface ITabs extends RouteComponentProps<any> {
+interface ITabs {
   items: Item[],
   activeItem: string,
 }
 
-const Tabs = ({ items, activeItem, history }: ITabs) => {
+const Tabs = ({ items, activeItem }: ITabs) => {
   const defaultIndex = items.findIndex(({ name }) => name === activeItem);
 
+  const history = useHistory();
+
   const onChange = (selectedIndex: number) => {
     const item = items[selectedIndex];
 
@@ -130,4 +132,4 @@ const Tabs = ({ items, activeItem, history }: ITabs) => {
   );
 };
 
-export default withRouter(Tabs);
+export default Tabs;