Fix issue when rendering Link/NavLink outside of matched routes (#11062)

* Fix issue when rendering Link/NavLink outside of matched routes * Update packages/react-router-dom/__tests__/link-href-test.tsx
remix-run · Dec 4, 2023 · cb53f41 · cb53f41
1 parent 211c1ff
commit cb53f41
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/.changeset/pretty-dolphins-relax.md b/.changeset/pretty-dolphins-relax.md
@@ -0,0 +1,5 @@
+---
+"@remix-run/router": patch
+---
+
+Fix `relative="path"` issue when rendering `Link`/`NavLink` outside of matched routes
diff --git a/packages/react-router-dom/__tests__/link-href-test.tsx b/packages/react-router-dom/__tests__/link-href-test.tsx
@@ -927,4 +927,37 @@ describe("<Link> href", () => {
     );
     warnSpy.mockRestore();
   });
+
+  test("renders fine when used outside a route context", () => {
+    let renderer: TestRenderer.ReactTestRenderer;
+    TestRenderer.act(() => {
+      renderer = TestRenderer.create(
+        <MemoryRouter>
+          <Link to="route">Route</Link>
+          <Link to="path" relative="path">
+            Path
+          </Link>
+        </MemoryRouter>
+      );
+    });
+
+    let anchors = renderer.root.findAllByType("a");
+    expect(anchors.map((a) => ({ href: a.props.href, text: a.children })))
+      .toMatchInlineSnapshot(`
+      [
+        {
+          "href": "/route",
+          "text": [
+            "Route",
+          ],
+        },
+        {
+          "href": "/path",
+          "text": [
+            "Path",
+          ],
+        },
+      ]
+    `);
+  });
 });
diff --git a/packages/router/utils.ts b/packages/router/utils.ts
@@ -1191,9 +1191,12 @@ export function resolveTo(
   if (toPathname == null) {
     from = locationPathname;
   } else if (isPathRelative) {
-    let fromSegments = routePathnames[routePathnames.length - 1]
-      .replace(/^\//, "")
-      .split("/");
+    let fromSegments =
+      routePathnames.length === 0
+        ? []
+        : routePathnames[routePathnames.length - 1]
+            .replace(/^\//, "")
+            .split("/");
 
     if (toPathname.startsWith("..")) {
       let toSegments = toPathname.split("/");