parse non-nested path params correctly

Author: nlynzaad

e2e/react-router/basic-file-based/src/routes/params-ps/non-nested/route.tsx

@@ -18,6 +18,14 @@ function RouteComponent() {
           >
             /params-ps/non-nested/$foo/$bar
           </Link>
+          <Link
+            from={Route.fullPath}
+            data-testid="l-to-non-nested-foo2-bar2"
+            to="./$foo/$bar"
+            params={{ foo: 'foo2', bar: 'bar2' }}
+          >
+            /params-ps/non-nested/$foo/$bar
+          </Link>
         </li>
       </ul>
       <Outlet />

e2e/react-router/basic-file-based/tests/params.spec.ts

@@ -69,6 +69,7 @@ test.describe('params operations + non-nested routes', () => {
       'href',
       '/params-ps/non-nested/foo/bar',
     )
+
     await fooBarLink.click()
     await page.waitForLoadState('networkidle')
     const pagePathname = new URL(page.url()).pathname
@@ -83,6 +84,27 @@ test.describe('params operations + non-nested routes', () => {
     const paramsText = await paramsValue.innerText()
     const paramsObj = JSON.parse(paramsText)
     expect(paramsObj).toEqual({ foo: 'foo', bar: 'bar' })
+
+    const foo2Bar2Link = page.getByTestId('l-to-non-nested-foo2-bar2')
+
+    await expect(foo2Bar2Link).toHaveAttribute(
+      'href',
+      '/params-ps/non-nested/foo2/bar2',
+    )
+    await foo2Bar2Link.click()
+    const pagePathname2 = new URL(page.url()).pathname
+    await page.waitForLoadState('networkidle')
+    expect(pagePathname2).toBe('/params-ps/non-nested/foo2/bar2')
+
+    const foo2ParamsValue = page.getByTestId('foo-params-value')
+    const foo2ParamsText = await foo2ParamsValue.innerText()
+    const foo2ParamsObj = JSON.parse(foo2ParamsText)
+    expect(foo2ParamsObj).toEqual({ foo: 'foo2' })
+
+    const params2Value = page.getByTestId('foo-bar-params-value')
+    const params2Text = await params2Value.innerText()
+    const params2Obj = JSON.parse(params2Text)
+    expect(params2Obj).toEqual({ foo: 'foo2', bar: 'bar2' })
   })
 })
 

e2e/solid-router/basic-file-based/src/routes/params-ps/non-nested/route.tsx

@@ -16,7 +16,15 @@ function RouteComponent() {
             to="./$foo/$bar"
             params={{ foo: 'foo', bar: 'bar' }}
           >
-            /params-ps/non-nested/$foo/$bar
+            /params-ps/non-nested/foo/bar
+          </Link>
+          <Link
+            from={Route.fullPath}
+            data-testid="l-to-non-nested-foo2-bar2"
+            to="./$foo/$bar"
+            params={{ foo: 'foo2', bar: 'bar2' }}
+          >
+            /params-ps/non-nested/foo2/bar2
           </Link>
         </li>
       </ul>

e2e/solid-router/basic-file-based/tests/params.spec.ts

@@ -158,5 +158,26 @@ test.describe('params operations + non-nested routes', () => {
     const paramsText = await paramsValue.innerText()
     const paramsObj = JSON.parse(paramsText)
     expect(paramsObj).toEqual({ foo: 'foo', bar: 'bar' })
+
+    const foo2Bar2Link = page.getByTestId('l-to-non-nested-foo2-bar2')
+
+    await expect(foo2Bar2Link).toHaveAttribute(
+      'href',
+      '/params-ps/non-nested/foo2/bar2',
+    )
+    await foo2Bar2Link.click()
+    const pagePathname2 = new URL(page.url()).pathname
+    await page.waitForLoadState('networkidle')
+    expect(pagePathname2).toBe('/params-ps/non-nested/foo2/bar2')
+
+    const foo2ParamsValue = page.getByTestId('foo-params-value')
+    const foo2ParamsText = await foo2ParamsValue.innerText()
+    const foo2ParamsObj = JSON.parse(foo2ParamsText)
+    expect(foo2ParamsObj).toEqual({ foo: 'foo2' })
+
+    const params2Value = page.getByTestId('foo-bar-params-value')
+    const params2Text = await params2Value.innerText()
+    const params2Obj = JSON.parse(params2Text)
+    expect(params2Obj).toEqual({ foo: 'foo2', bar: 'bar2' })
   })
 })

packages/router-core/src/path.ts

@@ -218,7 +218,8 @@ export const parsePathname = (
   return parsed
 }
 
-const PARAM_RE = /^\$.{1,}$/ // $paramName
+const PARAM_RE = /^\$.{1,}(?<!_)$/ // $paramName
+const PARAM_NON_NESTED_RE = /^\$.{1,}_$/ // $paramName_
 const PARAM_W_CURLY_BRACES_RE = /^(.*?)\{(\$[a-zA-Z_$][a-zA-Z0-9_$]*)\}(.*)$/ // prefix{$paramName}suffix
 const OPTIONAL_PARAM_W_CURLY_BRACES_RE =
   /^(.*?)\{-(\$[a-zA-Z_$][a-zA-Z0-9_$]*)\}(.*)$/ // prefix{-$paramName}suffix
@@ -319,6 +320,17 @@ function baseParsePathname(pathname: string): ReadonlyArray<Segment> {
         }
       }
 
+      // Check for non-nested bare parameter format: $paramName_ (without curly braces)
+      if (PARAM_NON_NESTED_RE.test(part)) {
+        const paramName = part.slice(1, -1)
+        return {
+          type: SEGMENT_TYPE_PARAM,
+          value: '$' + paramName,
+          prefixSegment: undefined,
+          suffixSegment: undefined,
+        }
+      }
+
       // Check for bare wildcard: $ (without curly braces)
       if (WILDCARD_RE.test(part)) {
         return {

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

@@ -432,6 +432,12 @@ describe('interpolatePath', () => {
         params: { _splat: 'sean/cassiere' },
         result: '/users/sean/cassiere',
       },
+      {
+        name: 'should interpolate the non-nested path',
+        path: '/users/$id_',
+        params: { id: '123' },
+        result: '/users/123',
+      },
     ])('$name', ({ path, params, decodeCharMap, result }) => {
       expect(
         interpolatePath({