Add support for handling any kind of empty _splat consistently

Author: paul-sachs

packages/react-router/tests/link.test.tsx

@@ -5549,6 +5549,99 @@ describe.each([{ basepath: '' }, { basepath: '/basepath' }])(
   },
 )
 
+describe("splat routes with empty splat", () => {
+  test.each([{ trailingSlash: true }, { trailingSlash: false }])(
+    'should handle empty _splat parameter with trailingSlash: $trailingSlash',
+    async ({ trailingSlash }) => {
+      const tail = trailingSlash ? '/' : ''
+
+      const rootRoute = createRootRoute()
+      const indexRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/',
+        component: () => {
+          return (
+            <>
+              <h1>Index Route</h1>
+              <Link
+                data-testid="splat-link-with-empty-splat"
+                to="/splat/$"
+                params={{ _splat: "" }}
+                activeProps={{ className: "active" }}
+              >
+                Link to splat with _splat value
+              </Link>
+              <Link
+                data-testid="splat-link-with-undefined-splat"
+                to="/splat/$"
+                params={{ _splat: undefined }}
+                activeProps={{ className: "active" }}
+              >
+
+                Link to splat with undefined _splat
+              </Link>
+              <Link
+                data-testid="splat-link-with-no-splat"
+                to="/splat/$"
+                params={{ }}
+                activeProps={{ className: "active" }}
+              >
+
+                Link to splat with no _splat at all
+              </Link>
+            </>
+          )
+        },
+      })
+
+      const splatRoute = createRoute({
+        getParentRoute: () => rootRoute,
+        path: 'splat/$',
+        component: () => {
+          return <h1>Splat Route</h1>
+        },
+      })
+
+      const router = createRouter({
+        routeTree: rootRoute.addChildren([indexRoute, splatRoute]),
+        history,
+        trailingSlash: trailingSlash ? 'always' : 'never',
+      })
+
+      render(<RouterProvider router={router} />)
+
+      const splatLinkWithEmptySplat = await screen.findByTestId(
+        'splat-link-with-empty-splat',
+      )
+      const splatLinkWithUndefinedSplat = await screen.findByTestId(
+        'splat-link-with-undefined-splat',
+      )
+      const splatLinkWithNoSplat = await screen.findByTestId(
+        'splat-link-with-no-splat',
+      )
+
+      // When _splat has a value, it should follow the trailingSlash setting
+      expect(splatLinkWithEmptySplat.getAttribute('href')).toBe(
+        `/splat${tail}`,
+      )
+
+      expect(splatLinkWithUndefinedSplat.getAttribute('href')).toBe(`/splat${tail}`)
+      expect(splatLinkWithNoSplat.getAttribute('href')).toBe(`/splat${tail}`)
+
+      // Click the link with empty _splat and ensure the route matches
+      await act(async () => {
+        fireEvent.click(splatLinkWithEmptySplat)
+      })
+
+      expect(splatLinkWithEmptySplat).toHaveClass('active')
+      expect(splatLinkWithUndefinedSplat).toHaveClass('active')
+      expect(splatLinkWithNoSplat).toHaveClass('active')
+      expect(window.location.pathname).toBe(`/splat${tail}`)
+      expect(await screen.findByText('Splat Route')).toBeInTheDocument()
+    },
+  )
+})
+
 describe('relative links to current route', () => {
   test.each([true, false])(
     'should navigate to current route when using "." in nested route structure from Index Route with trailingSlash: %s',

packages/router-core/src/path.ts

@@ -426,8 +426,8 @@ export function interpolatePath({
         const segmentPrefix = segment.prefixSegment || ''
         const segmentSuffix = segment.suffixSegment || ''
 
-        // Check if _splat parameter is missing
-        if (!('_splat' in params)) {
+        // Check if _splat parameter is missing. _splat could be missing if undefined or an empty string or some other falsy value.
+        if (!params._splat) {
           isMissingParams = true
           // For missing splat parameters, just return the prefix and suffix without the wildcard
           if (leaveWildcards) {

packages/router-core/tests/path.test.ts

@@ -472,6 +472,22 @@ describe('interpolatePath', () => {
         params: {},
         expectedResult: '/hello/prefixsuffix',
       },
+      {
+        name: 'splat route with empty splat',
+        path: '/hello/$',
+        params: {
+          _splat: "",
+        },
+        expectedResult: '/hello',
+      },
+      {
+        name: 'splat route with undefined splat',
+        path: '/hello/$',
+        params: {
+          _splat: undefined
+        },
+        expectedResult: '/hello',
+      }
     ])('$name', ({ path, params, expectedResult }) => {
       const result = interpolatePath({
         path,