diff --git a/packages/react-router-dom/__tests__/link-href-test.tsx b/packages/react-router-dom/__tests__/link-href-test.tsx
index 9ec368fc70..41cd6028ee 100644
--- a/packages/react-router-dom/__tests__/link-href-test.tsx
+++ b/packages/react-router-dom/__tests__/link-href-test.tsx
@@ -1,6 +1,18 @@
import * as React from "react";
+import { createRoot } from "react-dom/client";
import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, Link, Outlet } from "react-router-dom";
+import {
+ MemoryRouter,
+ Routes,
+ Route,
+ Link,
+ Outlet,
+ BrowserRouter,
+ HashRouter,
+ createBrowserRouter,
+ RouterProvider,
+ createHashRouter,
+} from "react-router-dom";
describe(" href", () => {
describe("in a static route", () => {
@@ -679,4 +691,88 @@ describe(" href", () => {
);
});
});
+
+ it("inside a browser router", () => {
+ let node: HTMLDivElement = document.createElement("div");
+ document.body.appendChild(node);
+ TestRenderer.act(() => {
+ createRoot(node).render(
+
+
+ Link}
+ />
+
+
+ );
+ });
+
+ expect(node.innerHTML).toMatchInlineSnapshot(
+ `"Link"`
+ );
+
+ document.body.removeChild(node);
+ node = null!;
+ });
+
+ it("inside a hash router", () => {
+ let node: HTMLDivElement = document.createElement("div");
+ document.body.appendChild(node);
+ TestRenderer.act(() => {
+ createRoot(node).render(
+
+
+ Link}
+ />
+
+
+ );
+ });
+
+ expect(node.innerHTML).toMatchInlineSnapshot(
+ `"Link"`
+ );
+
+ document.body.removeChild(node);
+ node = null!;
+ });
+
+ it("inside a data browser router", () => {
+ let node: HTMLDivElement = document.createElement("div");
+ document.body.appendChild(node);
+ TestRenderer.act(() => {
+ let router = createBrowserRouter([
+ { path: "/", element: Link },
+ ]);
+ createRoot(node).render();
+ });
+
+ expect(node.innerHTML).toMatchInlineSnapshot(
+ `"Link"`
+ );
+
+ document.body.removeChild(node);
+ node = null!;
+ });
+
+ it("inside a data hash router", () => {
+ let node: HTMLDivElement = document.createElement("div");
+ document.body.appendChild(node);
+ TestRenderer.act(() => {
+ let router = createHashRouter([
+ { path: "/", element: Link },
+ ]);
+ createRoot(node).render();
+ });
+
+ expect(node.innerHTML).toMatchInlineSnapshot(
+ `"Link"`
+ );
+
+ document.body.removeChild(node);
+ node = null!;
+ });
});
diff --git a/packages/router/router.ts b/packages/router/router.ts
index 2e7e495c38..398b6c1e84 100644
--- a/packages/router/router.ts
+++ b/packages/router/router.ts
@@ -1739,7 +1739,9 @@ export function createRouter(init: RouterInit): Router {
navigate,
fetch,
revalidate,
- createHref,
+ // Passthrough to history-aware createHref used by useHref so we get proper
+ // hash-aware URLs in DOM paths
+ createHref: (to: To) => init.history.createHref(to),
getFetcher,
deleteFetcher,
dispose,