Added better detection for absolute urls in link component

remix-run · Jan 27, 2023 · 4f817ca · 4f817ca
1 parent fca5e55
commit 4f817ca
Show file tree

Hide file tree

Showing 2 changed files with 45 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
@@ -128,6 +128,50 @@ describe("<Link> href", () => {
 
       expect(renderer.root.findByType("a").props.href).toEqual("//remix.run");
     });
+
+    test('<Link to="mailto:remix@example.com"> is treated as external link', () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/inbox/messages"]}>
+            <Routes>
+              <Route path="inbox">
+                <Route
+                  path="messages"
+                  element={<Link to="mailto:remix@example.com" />}
+                />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.root.findByType("a").props.href).toEqual(
+        "mailto:remix@example.com"
+      );
+    });
+
+    test('<Link to="web+remix://somepath"> is treated as external link', () => {
+      let renderer: TestRenderer.ReactTestRenderer;
+      TestRenderer.act(() => {
+        renderer = TestRenderer.create(
+          <MemoryRouter initialEntries={["/inbox/messages"]}>
+            <Routes>
+              <Route path="inbox">
+                <Route
+                  path="messages"
+                  element={<Link to="web+remix://somepath" />}
+                />
+              </Route>
+            </Routes>
+          </MemoryRouter>
+        );
+      });
+
+      expect(renderer.root.findByType("a").props.href).toEqual(
+        "web+remix://somepath"
+      );
+    });
   });
 
   describe("in a dynamic route", () => {

diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
@@ -420,8 +420,7 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   ) {
     // `location` is the unaltered href we will render in the <a> tag for absolute URLs
     let location = typeof to === "string" ? to : createPath(to);
-    let isAbsolute =
-      /^[a-z+]+:\/\//i.test(location) || location.startsWith("//");
+    let isAbsolute = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i.test(location);
 
     // Location to use in the click handler
     let navigationLocation = location;