fix: correctly match routes with optional path params followed by req… (#4838)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: schiller-manuel

packages/react-router/tests/optional-path-params.test.tsx

@@ -895,6 +895,70 @@ describe('React Router - Optional Path Parameters', () => {
         expect(JSON.parse(paramsElement.textContent!)).toEqual(expectedParams)
       },
     )
+
+    it.each([
+      {
+        path: '/chambres',
+        expected: {
+          rooms: 'chambres',
+          locale: 'undefined',
+        },
+      },
+      {
+        path: '/fr/chambres',
+        expected: {
+          rooms: 'chambres',
+          locale: 'fr',
+        },
+      },
+      {
+        path: '/rooms',
+        expected: {
+          rooms: 'rooms',
+          locale: 'undefined',
+        },
+      },
+      {
+        path: '/en/rooms',
+        expected: {
+          rooms: 'rooms',
+          locale: 'en',
+        },
+      },
+    ])(
+      'should handle routes with required param after optional param: $path',
+      async ({ path, expected }) => {
+        const rootRoute = createRootRoute()
+        const roomsRoute = createRoute({
+          getParentRoute: () => rootRoute,
+          path: '/{-$locale}/$rooms',
+          component: () => {
+            const { locale, rooms } = roomsRoute.useParams()
+            return (
+              <div>
+                <h1>Rooms</h1>
+                <div data-testid="locale-param">{locale ?? 'undefined'}</div>
+                <div data-testid="rooms-param">{rooms ?? 'undefined'}</div>
+                <Outlet />
+              </div>
+            )
+          },
+        })
+
+        window.history.replaceState({}, '', path)
+
+        const router = createRouter({
+          routeTree: rootRoute.addChildren([roomsRoute]),
+        })
+
+        render(<RouterProvider router={router} />)
+        await act(() => router.load())
+        const roomsParam = await screen.findByTestId('rooms-param')
+        expect(roomsParam).toHaveTextContent(expected.rooms)
+        const localeParam = await screen.findByTestId('locale-param')
+        expect(localeParam).toHaveTextContent(expected.locale)
+      },
+    )
   })
 
   describe('edge cases and error handling', () => {

packages/router-core/src/path.ts

@@ -811,6 +811,9 @@ function isMatch(
               futureRouteSegment?.type === SEGMENT_TYPE_PARAM ||
               futureRouteSegment?.type === SEGMENT_TYPE_WILDCARD
             ) {
+              if (baseSegments.length < routeSegments.length) {
+                shouldMatchOptional = false
+              }
               break
             }
           }