fix(react-router): prevent incorrectly matching paths without slash separator

.changeset/pink-seas-hope.md

@@ -0,0 +1,8 @@
+---
+"react-router": patch
+---
+
+Fix matchPath optional params matching without a "/" separator.
+
+- matchPath("/users/:id?", "/usersblah") now returns null.
+- matchPath("/test_route/:part?", "/test_route_more") now returns null.

contributors.yml

@@ -306,6 +306,7 @@
 - nnhjs
 - noisypigeon
 - nowells
+- nwleedev
 - Nurai1
 - Obi-Dann
 - okalil

packages/react-router/__tests__/matchPath-test.tsx

@@ -290,6 +290,41 @@ describe("matchPath optional dynamic segments", () => {
     const match = matchPath("/:lang?/user/:id?", "/en/user/123");
     expect(match).toMatchObject({ params: { lang: "en", id: "123" } });
   });
+
+  it("should NOT match when pathname extends base path without separator", () => {
+    expect(matchPath("/test_route/:part?", "/test_route_more")).toBeNull();
+  });
+
+  it("should NOT match when pathname extends base path without separator (middle optional param)", () => {
+    expect(matchPath("/test_route/:part?/edit", "/test_route_more/edit")).toBeNull();
+  });
+
+  it("should NOT match optional param when pathname has extra characters after base", () => {
+    expect(matchPath("/users/:id?", "/usersblah")).toBeNull();
+    expect(matchPath("/api/:version?", "/api123")).toBeNull();
+    expect(matchPath("/home/:section?", "/homepage")).toBeNull();
+  });
+
+  it("should still match optional param with proper path separator", () => {
+    expect(matchPath("/test_route/:part?", "/test_route/more")).toMatchObject({
+      params: { part: "more" },
+    });
+    expect(matchPath("/test_route/:part?", "/test_route")).toMatchObject({
+      params: { part: undefined },
+    });
+    expect(matchPath("/test_route/:part?", "/test_route/")).toMatchObject({
+      params: { part: undefined },
+    });
+  });
+
+  it("should match a middle optional param with proper path separators", () => {
+    expect(matchPath("/test_route/:part?/edit", "/test_route/more/edit")).toMatchObject({
+      params: { part: "more" },
+    });
+    expect(matchPath("/test_route/:part?/edit", "/test_route/edit")).toMatchObject({
+      params: { part: undefined },
+    });
+  });
 });
 
 describe("matchPath optional static segments", () => {

packages/react-router/__tests__/path-matching-test.tsx

@@ -185,6 +185,10 @@ describe("path matching", () => {
     expect(
       matchPath("/sitemap/:lang?.xml", "/sitemap/.xml")?.params,
     ).toStrictEqual({ lang: undefined });
+    expect(matchPath("/sitemap/:lang?.xml", "/sitemap/en.xml")?.params).toStrictEqual(
+      { lang: "en" },
+    );
+    expect(matchPath("/sitemap/:lang?.xml", "/sitemap.xml")).toBeNull();
   });
 });
 

packages/react-router/lib/router/utils.ts

@@ -1492,9 +1492,25 @@ export function compilePath(
       .replace(/[\\.*+^${}|()[\]]/g, "\\$&") // Escape special regex chars
       .replace(
         /\/:([\w-]+)(\?)?/g,
-        (_: string, paramName: string, isOptional) => {
+        (
+          match: string,
+          paramName: string,
+          isOptional: string | undefined,
+          index: number,
+          str: string,
+        ) => {
           params.push({ paramName, isOptional: isOptional != null });
-          return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
+
+          if (isOptional) {
+            let nextChar = str.charAt(index + match.length);
+            if (nextChar && nextChar !== "/") {
+              return "/([^\\/]*)";
+            }
+
+            return "(?:/([^\\/]*))?";
+          }
+
+          return "/([^\\/]+)";
         },
       ) // Dynamic segment
       .replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2"); // Optional static segment