fix: treat absolute/same-origin/different-basename <Link to> values as external

.changeset/big-olives-doubt.md

@@ -0,0 +1,5 @@
+---
+"react-router-dom": patch
+---
+
+Treat absolute/same-origin/different-basename <Link to> values as external

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

@@ -138,7 +138,6 @@ describe("A <Link> click", () => {
           <div>
             <h1>Home</h1>
             <Link
-              reloadDocument
               to="https://remix.run"
               onClick={(e) => {
                 handlerCalled = true;
@@ -171,6 +170,78 @@ describe("A <Link> click", () => {
     });
   });
 
+  describe("when a same-origin/different-basename absolute URL is specified", () => {
+    it.only("does not prevent default", () => {
+      function Home() {
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link to="http://localhost/not/base">About</Link>
+          </div>
+        );
+      }
+
+      act(() => {
+        ReactDOM.createRoot(node).render(
+          <MemoryRouter initialEntries={["/base/home"]} basename="/base">
+            <Routes>
+              <Route path="home" element={<Home />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      let anchor = node.querySelector("a");
+      expect(anchor).not.toBeNull();
+
+      let event: MouseEvent;
+      act(() => {
+        event = click(anchor);
+      });
+
+      expect(event.defaultPrevented).toBe(false);
+    });
+
+    it("calls provided listener", () => {
+      let handlerCalled;
+      let defaultPrevented;
+
+      function Home() {
+        return (
+          <div>
+            <h1>Home</h1>
+            <Link
+              to="http://localhost/not/base"
+              onClick={(e) => {
+                handlerCalled = true;
+                defaultPrevented = e.defaultPrevented;
+              }}
+            >
+              About
+            </Link>
+          </div>
+        );
+      }
+
+      act(() => {
+        ReactDOM.createRoot(node).render(
+          <MemoryRouter initialEntries={["/base/home"]} basename="/base">
+            <Routes>
+              <Route path="home" element={<Home />} />
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      act(() => {
+        click(node.querySelector("a"));
+      });
+
+      expect(handlerCalled).toBe(true);
+      expect(defaultPrevented).toBe(false);
+    });
+  });
+
   describe("when reloadDocument is specified", () => {
     it("does not prevent default", () => {
       function Home() {

packages/react-router-dom/index.tsx

@@ -42,6 +42,7 @@ import {
   createHashHistory,
   UNSAFE_invariant as invariant,
   joinPaths,
+  stripBasename,
   ErrorResponse,
 } from "@remix-run/router";
 
@@ -420,6 +421,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     },
     ref
   ) {
+    let { basename } = React.useContext(NavigationContext);
+
     // Rendered into <a href> for absolute URLs
     let absoluteHref;
     let isExternal = false;
@@ -434,7 +437,10 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
         let targetUrl = to.startsWith("//")
           ? new URL(currentUrl.protocol + to)
           : new URL(to);
-        if (targetUrl.origin === currentUrl.origin) {
+        let isSameBasename =
+          stripBasename(targetUrl.pathname, basename) != null;
+
+        if (targetUrl.origin === currentUrl.origin && isSameBasename) {
           // Strip the protocol/origin for same-origin absolute URLs
           to = targetUrl.pathname + targetUrl.search + targetUrl.hash;
         } else {