refactor(router-core): more stable url decoding (#5663)

* add decode path segment util

* ensure navigation and browsing to path has same encoding/decoding

* add e2e tests

* add test recommendations

* nitpick

* minor enhancements

* build array once

* add additional unit and e2e tests

* remove react import from solid test

* nitpicks

* final nitpicks

* use history.push

Author: nlynzaad

e2e/react-router/basic-file-based/src/routeTree.gen.ts

@@ -56,8 +56,10 @@ import { Route as RedirectTargetViaLoaderRouteImport } from './routes/redirect/$
 import { Route as RedirectTargetViaBeforeLoadRouteImport } from './routes/redirect/$target/via-beforeLoad'
 import { Route as PostsPostIdEditRouteImport } from './routes/posts_.$postId.edit'
 import { Route as ParamsSingleValueRouteImport } from './routes/params.single.$value'
+import { Route as ParamsPsWildcardChar123Char125suffixAtChar45824RouteImport } from './routes/params-ps/wildcard/{$}suffix@대'
 import { Route as ParamsPsWildcardChar123Char125suffixRouteImport } from './routes/params-ps/wildcard/{$}suffix'
 import { Route as ParamsPsWildcardPrefixChar123Char125RouteImport } from './routes/params-ps/wildcard/prefix{$}'
+import { Route as ParamsPsWildcardPrefixAtChar45824Char123Char125RouteImport } from './routes/params-ps/wildcard/prefix@대{$}'
 import { Route as ParamsPsWildcardSplatRouteImport } from './routes/params-ps/wildcard/$'
 import { Route as ParamsPsNamedChar123fooChar125suffixRouteImport } from './routes/params-ps/named/{$foo}suffix'
 import { Route as ParamsPsNamedPrefixChar123fooChar125RouteImport } from './routes/params-ps/named/prefix{$foo}'
@@ -340,6 +342,12 @@ const ParamsSingleValueRoute = ParamsSingleValueRouteImport.update({
   path: '/params/single/$value',
   getParentRoute: () => rootRouteImport,
 } as any)
+const ParamsPsWildcardChar123Char125suffixAtChar45824Route =
+  ParamsPsWildcardChar123Char125suffixAtChar45824RouteImport.update({
+    id: '/params-ps/wildcard/{$}suffix@대',
+    path: '/params-ps/wildcard/{$}suffix@대',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const ParamsPsWildcardChar123Char125suffixRoute =
   ParamsPsWildcardChar123Char125suffixRouteImport.update({
     id: '/params-ps/wildcard/{$}suffix',
@@ -352,6 +360,12 @@ const ParamsPsWildcardPrefixChar123Char125Route =
     path: '/params-ps/wildcard/prefix{$}',
     getParentRoute: () => rootRouteImport,
   } as any)
+const ParamsPsWildcardPrefixAtChar45824Char123Char125Route =
+  ParamsPsWildcardPrefixAtChar45824Char123Char125RouteImport.update({
+    id: '/params-ps/wildcard/prefix@대{$}',
+    path: '/params-ps/wildcard/prefix@대{$}',
+    getParentRoute: () => rootRouteImport,
+  } as any)
 const ParamsPsWildcardSplatRoute = ParamsPsWildcardSplatRouteImport.update({
   id: '/params-ps/wildcard/$',
   path: '/params-ps/wildcard/$',
@@ -607,8 +621,10 @@ export interface FileRoutesByFullPath {
   '/params-ps/named/prefix{$foo}': typeof ParamsPsNamedPrefixChar123fooChar125Route
   '/params-ps/named/{$foo}suffix': typeof ParamsPsNamedChar123fooChar125suffixRoute
   '/params-ps/wildcard/$': typeof ParamsPsWildcardSplatRoute
+  '/params-ps/wildcard/prefix@대{$}': typeof ParamsPsWildcardPrefixAtChar45824Char123Char125Route
   '/params-ps/wildcard/prefix{$}': typeof ParamsPsWildcardPrefixChar123Char125Route
   '/params-ps/wildcard/{$}suffix': typeof ParamsPsWildcardChar123Char125suffixRoute
+  '/params-ps/wildcard/{$}suffix@대': typeof ParamsPsWildcardChar123Char125suffixAtChar45824Route
   '/params/single/$value': typeof ParamsSingleValueRoute
   '/posts/$postId/edit': typeof PostsPostIdEditRoute
   '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute
@@ -686,8 +702,10 @@ export interface FileRoutesByTo {
   '/params-ps/named/prefix{$foo}': typeof ParamsPsNamedPrefixChar123fooChar125Route
   '/params-ps/named/{$foo}suffix': typeof ParamsPsNamedChar123fooChar125suffixRoute
   '/params-ps/wildcard/$': typeof ParamsPsWildcardSplatRoute
+  '/params-ps/wildcard/prefix@대{$}': typeof ParamsPsWildcardPrefixAtChar45824Char123Char125Route
   '/params-ps/wildcard/prefix{$}': typeof ParamsPsWildcardPrefixChar123Char125Route
   '/params-ps/wildcard/{$}suffix': typeof ParamsPsWildcardChar123Char125suffixRoute
+  '/params-ps/wildcard/{$}suffix@대': typeof ParamsPsWildcardChar123Char125suffixAtChar45824Route
   '/params/single/$value': typeof ParamsSingleValueRoute
   '/posts/$postId/edit': typeof PostsPostIdEditRoute
   '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute
@@ -776,8 +794,10 @@ export interface FileRoutesById {
   '/params-ps/named/prefix{$foo}': typeof ParamsPsNamedPrefixChar123fooChar125Route
   '/params-ps/named/{$foo}suffix': typeof ParamsPsNamedChar123fooChar125suffixRoute
   '/params-ps/wildcard/$': typeof ParamsPsWildcardSplatRoute
+  '/params-ps/wildcard/prefix@대{$}': typeof ParamsPsWildcardPrefixAtChar45824Char123Char125Route
   '/params-ps/wildcard/prefix{$}': typeof ParamsPsWildcardPrefixChar123Char125Route
   '/params-ps/wildcard/{$}suffix': typeof ParamsPsWildcardChar123Char125suffixRoute
+  '/params-ps/wildcard/{$}suffix@대': typeof ParamsPsWildcardChar123Char125suffixAtChar45824Route
   '/params/single/$value': typeof ParamsSingleValueRoute
   '/posts_/$postId/edit': typeof PostsPostIdEditRoute
   '/redirect/$target/via-beforeLoad': typeof RedirectTargetViaBeforeLoadRoute
@@ -864,8 +884,10 @@ export interface FileRouteTypes {
     | '/params-ps/named/prefix{$foo}'
     | '/params-ps/named/{$foo}suffix'
     | '/params-ps/wildcard/$'
+    | '/params-ps/wildcard/prefix@대{$}'
     | '/params-ps/wildcard/prefix{$}'
     | '/params-ps/wildcard/{$}suffix'
+    | '/params-ps/wildcard/{$}suffix@대'
     | '/params/single/$value'
     | '/posts/$postId/edit'
     | '/redirect/$target/via-beforeLoad'
@@ -943,8 +965,10 @@ export interface FileRouteTypes {
     | '/params-ps/named/prefix{$foo}'
     | '/params-ps/named/{$foo}suffix'
     | '/params-ps/wildcard/$'
+    | '/params-ps/wildcard/prefix@대{$}'
     | '/params-ps/wildcard/prefix{$}'
     | '/params-ps/wildcard/{$}suffix'
+    | '/params-ps/wildcard/{$}suffix@대'
     | '/params/single/$value'
     | '/posts/$postId/edit'
     | '/redirect/$target/via-beforeLoad'
@@ -1032,8 +1056,10 @@ export interface FileRouteTypes {
     | '/params-ps/named/prefix{$foo}'
     | '/params-ps/named/{$foo}suffix'
     | '/params-ps/wildcard/$'
+    | '/params-ps/wildcard/prefix@대{$}'
     | '/params-ps/wildcard/prefix{$}'
     | '/params-ps/wildcard/{$}suffix'
+    | '/params-ps/wildcard/{$}suffix@대'
     | '/params/single/$value'
     | '/posts_/$postId/edit'
     | '/redirect/$target/via-beforeLoad'
@@ -1105,8 +1131,10 @@ export interface RootRouteChildren {
   ParamsPsNamedPrefixChar123fooChar125Route: typeof ParamsPsNamedPrefixChar123fooChar125Route
   ParamsPsNamedChar123fooChar125suffixRoute: typeof ParamsPsNamedChar123fooChar125suffixRoute
   ParamsPsWildcardSplatRoute: typeof ParamsPsWildcardSplatRoute
+  ParamsPsWildcardPrefixAtChar45824Char123Char125Route: typeof ParamsPsWildcardPrefixAtChar45824Char123Char125Route
   ParamsPsWildcardPrefixChar123Char125Route: typeof ParamsPsWildcardPrefixChar123Char125Route
   ParamsPsWildcardChar123Char125suffixRoute: typeof ParamsPsWildcardChar123Char125suffixRoute
+  ParamsPsWildcardChar123Char125suffixAtChar45824Route: typeof ParamsPsWildcardChar123Char125suffixAtChar45824Route
   ParamsSingleValueRoute: typeof ParamsSingleValueRoute
   PostsPostIdEditRoute: typeof PostsPostIdEditRoute
   RedirectPreloadFirstRoute: typeof RedirectPreloadFirstRoute
@@ -1447,6 +1475,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ParamsSingleValueRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/params-ps/wildcard/{$}suffix@대': {
+      id: '/params-ps/wildcard/{$}suffix@대'
+      path: '/params-ps/wildcard/{$}suffix@대'
+      fullPath: '/params-ps/wildcard/{$}suffix@대'
+      preLoaderRoute: typeof ParamsPsWildcardChar123Char125suffixAtChar45824RouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/params-ps/wildcard/{$}suffix': {
       id: '/params-ps/wildcard/{$}suffix'
       path: '/params-ps/wildcard/{$}suffix'
@@ -1461,6 +1496,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ParamsPsWildcardPrefixChar123Char125RouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/params-ps/wildcard/prefix@대{$}': {
+      id: '/params-ps/wildcard/prefix@대{$}'
+      path: '/params-ps/wildcard/prefix@대{$}'
+      fullPath: '/params-ps/wildcard/prefix@대{$}'
+      preLoaderRoute: typeof ParamsPsWildcardPrefixAtChar45824Char123Char125RouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/params-ps/wildcard/$': {
       id: '/params-ps/wildcard/$'
       path: '/params-ps/wildcard/$'
@@ -2091,10 +2133,14 @@ const rootRouteChildren: RootRouteChildren = {
   ParamsPsNamedChar123fooChar125suffixRoute:
     ParamsPsNamedChar123fooChar125suffixRoute,
   ParamsPsWildcardSplatRoute: ParamsPsWildcardSplatRoute,
+  ParamsPsWildcardPrefixAtChar45824Char123Char125Route:
+    ParamsPsWildcardPrefixAtChar45824Char123Char125Route,
   ParamsPsWildcardPrefixChar123Char125Route:
     ParamsPsWildcardPrefixChar123Char125Route,
   ParamsPsWildcardChar123Char125suffixRoute:
     ParamsPsWildcardChar123Char125suffixRoute,
+  ParamsPsWildcardChar123Char125suffixAtChar45824Route:
+    ParamsPsWildcardChar123Char125suffixAtChar45824Route,
   ParamsSingleValueRoute: ParamsSingleValueRoute,
   PostsPostIdEditRoute: PostsPostIdEditRoute,
   RedirectPreloadFirstRoute: RedirectPreloadFirstRoute,

e2e/react-router/basic-file-based/src/routes/params-ps/index.tsx

@@ -49,6 +49,15 @@ function RouteComponent() {
             /params-ps/wildcard/$
           </Link>
         </li>
+        <li>
+          <Link
+            data-testid="l-to-wildcard-escaped"
+            to="/params-ps/wildcard/$"
+            params={{ _splat: 'test[s\\/.\\/parameter%!🚀]' }}
+          >
+            /params-ps/wildcard/$ with escaped params
+          </Link>
+        </li>
         <li>
           <Link
             data-testid="l-to-wildcard-prefixfoo"
@@ -58,6 +67,15 @@ function RouteComponent() {
             /params-ps/wildcard/{'prefix{$}'}
           </Link>
         </li>
+        <li>
+          <Link
+            data-testid="l-to-wildcard-prefix-escaped"
+            to="/params-ps/wildcard/prefix@대{$}"
+            params={{ _splat: 'test[s\\/.\\/parameter%!🚀]' }}
+          >
+            /params-ps/wildcard/{'prefix@대{$}'}
+          </Link>
+        </li>
         <li>
           <Link
             data-testid="l-to-wildcard-foosuffix"
@@ -67,6 +85,15 @@ function RouteComponent() {
             /params-ps/wildcard/{'{$}suffix'}
           </Link>
         </li>
+        <li>
+          <Link
+            data-testid="l-to-wildcard-suffix-escaped"
+            to="/params-ps/wildcard/{$}suffix@대"
+            params={{ _splat: 'test[s\\/.\\/parameter%!🚀]' }}
+          >
+            /params-ps/wildcard/{'{$}suffix@대'}
+          </Link>
+        </li>
       </ul>
       <hr />
       <h3 className="pb-2">Non-nested path params</h3>

e2e/react-router/basic-file-based/src/routes/params-ps/wildcard/prefix@대{$}.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/params-ps/wildcard/prefix@대{$}')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const p = Route.useParams()
+  return (
+    <div>
+      <h3>ParamsWildcardSplatPrefix</h3>
+      <div data-testid="params-output">{JSON.stringify(p)}</div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/params-ps/wildcard/{$}suffix@대.tsx

@@ -0,0 +1,15 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/params-ps/wildcard/{$}suffix@대')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const p = Route.useParams()
+  return (
+    <div>
+      <h3>ParamsWildcardSplatSuffix</h3>
+      <div data-testid="params-output">{JSON.stringify(p)}</div>
+    </div>
+  )
+}

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

@@ -290,6 +290,33 @@ test.describe('params operations + prefix/suffix', () => {
         params: { '*': 'foo', _splat: 'foo' },
         destHeadingId: 'ParamsWildcardSplatSuffix',
       },
+      {
+        id: 'l-to-wildcard-escaped',
+        pathname: `/params-ps/wildcard/test[s%5C/.%5C/parameter%25!%F0%9F%9A%80]`,
+        params: {
+          _splat: 'test[s\\/.\\/parameter%!🚀]',
+          '*': 'test[s\\/.\\/parameter%!🚀]',
+        },
+        destHeadingId: 'ParamsWildcardSplat',
+      },
+      {
+        id: 'l-to-wildcard-prefix-escaped',
+        pathname: `/params-ps/wildcard/prefix@%EB%8C%80test[s%5C/.%5C/parameter%25!%F0%9F%9A%80]`,
+        params: {
+          _splat: 'test[s\\/.\\/parameter%!🚀]',
+          '*': 'test[s\\/.\\/parameter%!🚀]',
+        },
+        destHeadingId: 'ParamsWildcardSplatPrefix',
+      },
+      {
+        id: 'l-to-wildcard-suffix-escaped',
+        pathname: `/params-ps/wildcard/test[s%5C/.%5C/parameter%25!%F0%9F%9A%80]suffix@%EB%8C%80`,
+        params: {
+          _splat: 'test[s\\/.\\/parameter%!🚀]',
+          '*': 'test[s\\/.\\/parameter%!🚀]',
+        },
+        destHeadingId: 'ParamsWildcardSplatSuffix',
+      },
     ] satisfies Array<{
       id: string
       pathname: string