chore: add reproduction

TanStack · Apr 8, 2024 · f542349 · f542349
1 parent dac25a2
commit f542349
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/examples/react/basic-ssr-file-based/src/routeTree.gen.ts b/examples/react/basic-ssr-file-based/src/routeTree.gen.ts
@@ -15,6 +15,7 @@ import { Route as PostsImport } from './routes/posts'
 import { Route as ErrorImport } from './routes/error'
 import { Route as IndexImport } from './routes/index'
 import { Route as PostsIndexImport } from './routes/posts/index'
+import { Route as ReproIdImport } from './routes/repro/$id'
 import { Route as PostsPostIdImport } from './routes/posts/$postId'
 
 // Create/Update Routes
@@ -39,6 +40,11 @@ const PostsIndexRoute = PostsIndexImport.update({
   getParentRoute: () => PostsRoute,
 } as any)
 
+const ReproIdRoute = ReproIdImport.update({
+  path: '/repro/$id',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const PostsPostIdRoute = PostsPostIdImport.update({
   path: '/$postId',
   getParentRoute: () => PostsRoute,
@@ -64,6 +70,10 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof PostsPostIdImport
       parentRoute: typeof PostsImport
     }
+    '/repro/$id': {
+      preLoaderRoute: typeof ReproIdImport
+      parentRoute: typeof rootRoute
+    }
     '/posts/': {
       preLoaderRoute: typeof PostsIndexImport
       parentRoute: typeof PostsImport
@@ -77,6 +87,7 @@ export const routeTree = rootRoute.addChildren([
   IndexRoute,
   ErrorRoute,
   PostsRoute.addChildren([PostsPostIdRoute, PostsIndexRoute]),
+  ReproIdRoute,
 ])
 
 /* prettier-ignore-end */
diff --git a/examples/react/basic-ssr-file-based/src/routes/__root.tsx b/examples/react/basic-ssr-file-based/src/routes/__root.tsx
@@ -4,6 +4,7 @@ import {
   Link,
   Outlet,
   createRootRouteWithContext,
+  useRouterState,
 } from '@tanstack/react-router'
 import { DehydrateRouter } from '@tanstack/react-router-server/client'
 import { RouterContext } from '../routerContext'
@@ -13,6 +14,9 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 })
 
 function RootComponent() {
+  const location = useRouterState({ select: (s) => s.location })
+  console.log('[location]', location)
+
   return (
     <html lang="en">
       <head>
@@ -38,6 +42,24 @@ function RootComponent() {
       </head>
       <body>
         <div className="p-2 flex gap-2 text-lg">
+          <Link
+            to="/repro/$id"
+            params={{ id: '✅' }}
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            Repro1
+          </Link>
+          <Link
+            to="/repro/$id"
+            params={{ id: encodeURI('✅') }}
+            activeProps={{
+              className: 'font-bold',
+            }}
+          >
+            Repro2
+          </Link>
           <Link
             to="/"
             activeProps={{

diff --git a/examples/react/basic-ssr-file-based/src/routes/repro/$id.tsx b/examples/react/basic-ssr-file-based/src/routes/repro/$id.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute, useRouterState } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/repro/$id')({
+  component: Page,
+})
+
+function Page() {
+  const { state, ...location } = useRouterState({ select: (s) => s.location })
+  const params = Route.useParams()
+  return (
+    <div>
+      <pre>location = {JSON.stringify(location, null, 2)}</pre>
+      <pre>params = {JSON.stringify(params, null, 2)}</pre>
+    </div>
+  )
+}