diff --git a/packages/web_ui/src/components/InstanceList.tsx b/packages/web_ui/src/components/InstanceList.tsx
index d966ccad..c1aa76d0 100644
--- a/packages/web_ui/src/components/InstanceList.tsx
+++ b/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()}
>
-
- {hostName(instance.assignedHost)}
-
+ {hostName(instance.assignedHost)}
,
sorter: (a, b) => strcmp(hostName(a.assignedHost), hostName(b.assignedHost)),
responsive: ["sm"],
diff --git a/packages/web_ui/src/components/InstanceViewPage.tsx b/packages/web_ui/src/components/InstanceViewPage.tsx
index c1c4e018..5973cdfa 100644
--- a/packages/web_ui/src/components/InstanceViewPage.tsx
+++ b/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
? Unassigned
:
- {host?.name ?? instance.assignedHost}
+ {host?.name ?? instance.assignedHost}
}
{account.hasPermission("core.instance.assign") &&
-
- }
+ )
+ &&
+
+ }
;
}
diff --git a/packages/web_ui/src/components/Link.tsx b/packages/web_ui/src/components/Link.tsx
new file mode 100644
index 00000000..224e651d
--- /dev/null
+++ b/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) => void;
+
+ return (
+ {
+ onClick?.(event as React.MouseEvent);
+ if (!event.defaultPrevented) {
+ handleClick(event);
+ }
+ }}
+ ref={ref as React.RefObject | null}
+ target={target}
+ type={type as BaseType}
+ />
+ );
+ }
+);
+export default Link;
diff --git a/packages/web_ui/src/components/PageLayout.tsx b/packages/web_ui/src/components/PageLayout.tsx
index 8a9ce1e7..8361827b 100644
--- a/packages/web_ui/src/components/PageLayout.tsx
+++ b/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;
diff --git a/packages/web_ui/src/components/UsersPage.tsx b/packages/web_ui/src/components/UsersPage.tsx
index c487adf5..83c605aa 100644
--- a/packages/web_ui/src/components/UsersPage.tsx
+++ b/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;