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,