Replaced react Link with custom component

The custom component merges the behaviour of antd Typography.Link and the react-router.dom Link after the custom component prop was removed in v6 according to this guide: https://reactrouter.com/en/main/upgrading/v5#remove-link-component-prop

packages/web_ui/src/components/InstanceList.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { message, Button, Space, Table, Typography } from "antd";
 import CopyOutlined from "@ant-design/icons/CopyOutlined";
 import type { SizeType } from "antd/es/config-provider/SizeContext";
@@ -10,6 +10,7 @@ import { useHosts } from "../model/host";
 import InstanceStatusTag from "./InstanceStatusTag";
 import StartStopInstanceButton from "./StartStopInstanceButton";
 import { InstanceDetails } from "@clusterio/lib";
+import Link from "./Link";
 
 const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;
 
@@ -59,9 +60,7 @@ export default function InstanceList(props: InstanceListProps) {
 				to={`/hosts/${instance.assignedHost}/view`}
 				onClick={e => e.stopPropagation()}
 			>
-				<Typography.Link>
-					{hostName(instance.assignedHost)}
-				</Typography.Link>
+				{hostName(instance.assignedHost)}
 			</Link>,
 			sorter: (a, b) => strcmp(hostName(a.assignedHost), hostName(b.assignedHost)),
 			responsive: ["sm"],

packages/web_ui/src/components/InstanceViewPage.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from "react";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { Alert, Button, Descriptions, Dropdown, Menu, MenuProps, Modal, Space, Spin, Typography } from "antd";
 import type { ItemType } from "antd/es/menu/hooks/useItems";
 import DeleteOutlined from "@ant-design/icons/DeleteOutlined";
@@ -23,6 +23,7 @@ import { notifyErrorHandler } from "../util/notify";
 import { useInstance } from "../model/instance";
 import { useHost } from "../model/host";
 import InstanceStatusTag from "./InstanceStatusTag";
+import Link from "./Link";
 
 const { Title } = Typography;
 
@@ -43,7 +44,7 @@ function InstanceDescription(props: InstanceDescriptionProps) {
 			{!assigned
 				? <em>Unassigned</em>
 				: <Link to={`/hosts/${host?.id ?? instance.assignedHost}/view`}>
-					<Typography.Link>{host?.name ?? instance.assignedHost}</Typography.Link>
+					{host?.name ?? instance.assignedHost}
 				</Link>
 			}
 			{account.hasPermission("core.instance.assign") && <AssignInstanceModal
@@ -158,9 +159,10 @@ function InstanceButtons(props: { instance: lib.InstanceDetails }) {
 			"core.instance.extract_players",
 			"core.instance.kill",
 			"core.instance.delete",
-		) && <Dropdown placement="bottomRight" trigger={["click"]} menu={instanceButtonsMenuProps}>
-			<Button>More <DownOutlined /></Button>
-		</Dropdown>}
+		)
+			&& <Dropdown placement="bottomRight" trigger={["click"]} menu={instanceButtonsMenuProps}>
+				<Button>More <DownOutlined /></Button>
+			</Dropdown>}
 	</Space>;
 }
 

packages/web_ui/src/components/Link.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { Typography } from "antd";
+import {
+	LinkProps,
+	useHref,
+	useLinkClickHandler,
+} from "react-router-dom";
+import { BaseType } from "antd/es/typography/Base";
+
+const Link = React.forwardRef(
+	(
+		{
+			onClick,
+			replace = false,
+			state,
+			target,
+			to,
+			type,
+			...rest
+		}: LinkProps,
+		ref
+	) => {
+		let href = useHref(to);
+		let handleClick = useLinkClickHandler(to, {
+			replace,
+			state,
+			target,
+		}) as (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+
+		return (
+			<Typography.Link
+				{...rest}
+				href={href}
+				onClick={(event) => {
+					onClick?.(event as React.MouseEvent<HTMLAnchorElement, MouseEvent>);
+					if (!event.defaultPrevented) {
+						handleClick(event);
+					}
+				}}
+				ref={ref as React.RefObject<HTMLElement> | null}
+				target={target}
+				type={type as BaseType}
+			/>
+		);
+	}
+);
+export default Link;

packages/web_ui/src/components/PageLayout.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Link } from "react-router-dom";
 import { Layout, Breadcrumb } from "antd";
+import Link from "./Link";
 
 const { Content } = Layout;
 

packages/web_ui/src/components/UsersPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useContext, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { Button, Form, Input, Modal, Space, Table, Tag } from "antd";
 
 import * as lib from "@clusterio/lib";
@@ -12,6 +12,7 @@ import PageHeader from "./PageHeader";
 import PageLayout from "./PageLayout";
 import PluginExtra from "./PluginExtra";
 import { formatFirstSeen, formatLastSeen, sortFirstSeen, sortLastSeen, useUsers } from "../model/user";
+import Link from "./Link";
 
 const strcmp = new Intl.Collator(undefined, { numeric: true, sensitivity: "base" }).compare;