refactor(router-core): consistent Unicode handling (#5736)

* add router-core fixes and update tests

* update react-router unit tests

* update react-router e2e tests

* update solid-router unit tests

* update solid-router e2e tests

* update test description

* rename function

* rename test as per codeRabbit nitpick

* test cleanup

Author: nlynzaad

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

@@ -130,6 +130,14 @@ function RootComponent() {
         >
           relative routing
         </Link>{' '}
+        <Link
+          to="/대한민국"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          unicode path
+        </Link>{' '}
         <Link
           // @ts-expect-error
           to="/this-route-does-not-exist"

e2e/react-router/basic-file-based/src/routes/__root.tsx

@@ -18,6 +18,15 @@ function RouteComponent() {
             /params-ps/named/$foo
           </Link>
         </li>
+        <li>
+          <Link
+            data-testid="l-to-named-foo-special-characters"
+            to="/params-ps/named/$foo"
+            params={{ foo: 'foo%\\/🚀대' }}
+          >
+            /params-ps/named/$foo - with special characters
+          </Link>
+        </li>
         <li>
           <Link
             data-testid="l-to-named-prefixfoo"
@@ -58,6 +67,15 @@ function RouteComponent() {
             /params-ps/wildcard/$ with escaped params
           </Link>
         </li>
+        <li>
+          <Link
+            data-testid="l-to-wildcard-encoded"
+            to="/params-ps/wildcard/$"
+            params={{ _splat: '%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD' }}
+          >
+            /params-ps/wildcard/$ with encoded params
+          </Link>
+        </li>
         <li>
           <Link
             data-testid="l-to-wildcard-prefixfoo"

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

@@ -36,6 +36,14 @@ function RouteComponent() {
       >
         Bar2
       </Link>
+      <Link
+        from={Route.fullPath}
+        to="./$bar"
+        params={{ bar: '🚀%2F/abc대' }}
+        data-testid="params-foo-links-bar-special-characters"
+      >
+        Bar with special characters
+      </Link>
       <Outlet />
     </div>
   )

e2e/react-router/basic-file-based/src/routes/params-ps/named/$foo/route.tsx

@@ -21,6 +21,23 @@ function RouteComponent() {
       >
         go to /search-params/default?default=d2
       </Link>
+      <br />
+      <Link
+        data-testid="link-to-default-with-search-special-characters"
+        to="/search-params/default"
+        search={{ default: '🚀대한민국' }}
+      >
+        go to /search-params/default?default=🚀대한민국
+      </Link>
+      <br />
+      <Link
+        data-testid="link-to-default-with-search-encoded-characters"
+        to="/search-params/default"
+        search={{ default: '%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD' }}
+      >
+        go to
+        /search-params/default?default=%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD
+      </Link>
     </div>
   )
 }

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

@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/search-params')({
   beforeLoad: async () => {
-    await new Promise((resolve) => setTimeout(resolve, 1000))
+    await new Promise((resolve) => setTimeout(resolve, 100))
     return { hello: 'world' as string }
   },
 })

e2e/react-router/basic-file-based/src/routes/search-params/route.tsx

@@ -0,0 +1,63 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/대한민국')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div>
+      <h3 className="pb-2" data-testid="unicode-heading">
+        Hello "/대한민국"!
+      </h3>
+      <ul className="grid mb-2">
+        <li>
+          <Link
+            data-testid="l-to-named-latin"
+            from={Route.fullPath}
+            to="./🚀/$id"
+            params={{ id: 'foo' }}
+            activeProps={{ className: 'font-bold' }}
+          >
+            link to latin id
+          </Link>
+        </li>
+        <li>
+          <Link
+            data-testid="l-to-named-unicode"
+            from={Route.fullPath}
+            to="./🚀/$id"
+            params={{ id: 'foo%\\/🚀대' }}
+            activeProps={{ className: 'font-bold' }}
+          >
+            link to unicode id
+          </Link>
+        </li>
+        <li>
+          <Link
+            data-testid="l-to-wildcard-latin"
+            from={Route.fullPath}
+            to="./wildcard/$"
+            params={{ _splat: 'foo/bar' }}
+            activeProps={{ className: 'font-bold' }}
+          >
+            link to foo/bar
+          </Link>
+        </li>
+        <li>
+          <Link
+            data-testid="l-to-wildcard-unicode"
+            from={Route.fullPath}
+            to="./wildcard/$"
+            params={{ _splat: 'foo%\\/🚀대' }}
+            activeProps={{ className: 'font-bold' }}
+          >
+            link to foo%\/🚀대
+          </Link>
+        </li>
+      </ul>
+      <hr />
+      <Outlet />
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/대한민국.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/대한민국/wildcard/$')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const params = Route.useParams()
+
+  return (
+    <div>
+      <h3 data-testid="unicode-wildcard-heading">Unicode Wildcard Params</h3>
+      <div>
+        Hello /대한민국/wildcard/
+        <span data-testid="unicode-wildcard-params">{params._splat}</span>
+      </div>
+    </div>
+  )
+}

e2e/react-router/basic-file-based/src/routes/대한민국/route.tsx

@@ -0,0 +1,19 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/대한민국/🚀/$id')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const params = Route.useParams()
+
+  return (
+    <div>
+      <h3 data-testid="unicode-named-heading">Unicode Named Params</h3>
+      <div>
+        Hello /대한민국/🚀/
+        <span data-testid="unicode-named-params">{params.id}</span>
+      </div>
+    </div>
+  )
+}