fix: update createHref to be history-aware

remix-run · Oct 5, 2022 · 31af3cd · 31af3cd
1 parent 20499b5
commit 31af3cd
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 2 deletions.
diff --git 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("<Link> href", () => {
   describe("in a static route", () => {
@@ -679,4 +691,88 @@ describe("<Link> href", () => {
       );
     });
   });
+
+  it("inside a browser router", () => {
+    let node: HTMLDivElement = document.createElement("div");
+    document.body.appendChild(node);
+    TestRenderer.act(() => {
+      createRoot(node).render(
+        <BrowserRouter>
+          <Routes>
+            <Route
+              path="/"
+              element={<Link to="/path?search=value#hash">Link</Link>}
+            />
+          </Routes>
+        </BrowserRouter>
+      );
+    });
+
+    expect(node.innerHTML).toMatchInlineSnapshot(
+      `"<a href=\\"/path?search=value#hash\\">Link</a>"`
+    );
+
+    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(
+        <HashRouter>
+          <Routes>
+            <Route
+              path="/"
+              element={<Link to="/path?search=value#hash">Link</Link>}
+            />
+          </Routes>
+        </HashRouter>
+      );
+    });
+
+    expect(node.innerHTML).toMatchInlineSnapshot(
+      `"<a href=\\"#/path?search=value#hash\\">Link</a>"`
+    );
+
+    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 to="/path?search=value#hash">Link</Link> },
+      ]);
+      createRoot(node).render(<RouterProvider router={router} />);
+    });
+
+    expect(node.innerHTML).toMatchInlineSnapshot(
+      `"<a href=\\"/path?search=value#hash\\">Link</a>"`
+    );
+
+    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 to="/path?search=value#hash">Link</Link> },
+      ]);
+      createRoot(node).render(<RouterProvider router={router} />);
+    });
+
+    expect(node.innerHTML).toMatchInlineSnapshot(
+      `"<a href=\\"#/path?search=value#hash\\">Link</a>"`
+    );
+
+    document.body.removeChild(node);
+    node = null!;
+  });
 });
diff --git 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,