Fix support for optional static segments (#11813)

Author: LadyTsukiko

.changeset/eleven-humans-smell.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix optional static segment matching in `matchPath`

contributors.yml

@@ -212,6 +212,7 @@
 - KubasuIvanSakwa
 - KutnerUri
 - kylegirard
+- LadyTsukiko
 - landisdesign
 - latin-1
 - lazybean

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

@@ -245,7 +245,7 @@ describe("matchPath", () => {
   });
 });
 
-describe("matchPath optional segments", () => {
+describe("matchPath optional dynamic segments", () => {
   it("should match when optional segment is provided", () => {
     const match = matchPath("/:lang?/user/:id", "/en/user/123");
     expect(match).toMatchObject({ params: { lang: "en", id: "123" } });
@@ -292,6 +292,87 @@ describe("matchPath optional segments", () => {
   });
 });
 
+describe("matchPath optional static segments", () => {
+  it("should match when optional segment is provided", () => {
+    const match = matchPath("/school?/user/:id", "/school/user/123");
+    expect(match).toMatchObject({
+      pathname: "/school/user/123",
+      pathnameBase: "/school/user/123",
+    });
+  });
+
+  it("should match when optional segment is *not* provided", () => {
+    const match = matchPath("/school?/user/:id", "/user/123");
+    expect(match).toMatchObject({
+      pathname: "/user/123",
+      pathnameBase: "/user/123",
+    });
+  });
+
+  it("should match when middle optional segment is provided", () => {
+    const match = matchPath("/school/user?/:id", "/school/user/123");
+    expect(match).toMatchObject({
+      pathname: "/school/user/123",
+      pathnameBase: "/school/user/123",
+    });
+  });
+
+  it("should match when middle optional segment is *not* provided", () => {
+    const match = matchPath("/school/user?/:id", "/school/123");
+    expect(match).toMatchObject({
+      pathname: "/school/123",
+      pathnameBase: "/school/123",
+    });
+  });
+
+  it("should match when end optional segment is provided", () => {
+    const match = matchPath("/school/user/admin?", "/school/user/admin");
+    expect(match).toMatchObject({
+      pathname: "/school/user/admin",
+      pathnameBase: "/school/user/admin",
+    });
+  });
+
+  it("should match when end optional segment is *not* provided", () => {
+    const match = matchPath("/school/user/admin?", "/school/user");
+    expect(match).toMatchObject({
+      pathname: "/school/user",
+      pathnameBase: "/school/user",
+    });
+  });
+
+  it("should match multiple optional segments and none are provided", () => {
+    const match = matchPath("/school?/user/admin?", "/user");
+    expect(match).toMatchObject({
+      pathname: "/user",
+      pathnameBase: "/user",
+    });
+  });
+
+  it("should match multiple optional segments and one is provided", () => {
+    const match = matchPath("/school?/user/admin?", "/user/admin");
+    expect(match).toMatchObject({
+      pathname: "/user/admin",
+      pathnameBase: "/user/admin",
+    });
+  });
+
+  it("should match multiple optional segments and all are provided", () => {
+    const match = matchPath("/school?/user/admin?", "/school/user/admin");
+    expect(match).toMatchObject({
+      pathname: "/school/user/admin",
+      pathnameBase: "/school/user/admin",
+    });
+  });
+
+  it("does not trigger from question marks in the middle of the optional static segment", () => {
+    let match = matchPath("/school?abc/user/:id", "/abc/user/123");
+    expect(match).toBe(null);
+    match = matchPath("/school?abc", "/abc");
+    expect(match).toBe(null);
+  });
+});
+
 describe("matchPath *", () => {
   it("matches the root URL", () => {
     expect(matchPath("*", "/")).toMatchObject({

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

@@ -1444,7 +1444,8 @@ export function compilePath(
           params.push({ paramName, isOptional: isOptional != null });
           return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
         },
-      );
+      ) // Dynamic segment
+      .replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2"); // Optional static segment
 
   if (path.endsWith("*")) {
     params.push({ paramName: "*" });