fix: update createHref to be history-aware

contributors.yml

@@ -19,6 +19,7 @@
 - chensokheng
 - chrisngobanh
 - christopherchudzicki
+- codeape2
 - coryhouse
 - cvbuelow
 - david-crespo

packages/react-router-dom/__tests__/link-href-test.tsx

@@ -1,6 +1,17 @@
 import * as React from "react";
+import {
+  BrowserRouter,
+  HashRouter,
+  Link,
+  MemoryRouter,
+  Outlet,
+  Route,
+  RouterProvider,
+  Routes,
+  createBrowserRouter,
+  createHashRouter,
+} from "react-router-dom";
 import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, Link, Outlet } from "react-router-dom";
 
 describe("<Link> href", () => {
   describe("in a static route", () => {
@@ -679,4 +690,72 @@ describe("<Link> href", () => {
       );
     });
   });
+
+  describe("when using a browser router", () => {
+    it("renders proper <a href> for BrowserRouter", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <BrowserRouter>
+            <Routes>
+              <Route path="/" element={<Link to="/path?search=value#hash" />} />
+            </Routes>
+          </BrowserRouter>
+        );
+      });
+      expect(renderer.root.findByType("a").props.href).toEqual(
+        "/path?search=value#hash"
+      );
+    });
+
+    it("renders proper <a href> for createBrowserRouter", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        let router = createBrowserRouter([
+          {
+            path: "/",
+            element: <Link to="/path?search=value#hash">Link</Link>,
+          },
+        ]);
+        renderer = TestRenderer.create(<RouterProvider router={router} />);
+      });
+      expect(renderer.root.findByType("a").props.href).toEqual(
+        "/path?search=value#hash"
+      );
+    });
+  });
+
+  describe("when using a hash router", () => {
+    it("renders proper <a href> for HashRouter", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <HashRouter>
+            <Routes>
+              <Route path="/" element={<Link to="/path?search=value#hash" />} />
+            </Routes>
+          </HashRouter>
+        );
+      });
+      expect(renderer.root.findByType("a").props.href).toEqual(
+        "#/path?search=value#hash"
+      );
+    });
+
+    it("renders proper <a href> for createHashRouter", () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        let router = createHashRouter([
+          {
+            path: "/",
+            element: <Link to="/path?search=value#hash">Link</Link>,
+          },
+        ]);
+        renderer = TestRenderer.create(<RouterProvider router={router} />);
+      });
+      expect(renderer.root.findByType("a").props.href).toEqual(
+        "#/path?search=value#hash"
+      );
+    });
+  });
 });

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,