fix(react-start): Apply Link active properties correctly on SSR when including hash

e2e/react-start/basic/src/routes/specialChars/hash.tsx

@@ -1,15 +1,32 @@
 import { createFileRoute, useLocation } from '@tanstack/react-router'
+import { useState } from 'react'
 
 export const Route = createFileRoute('/specialChars/hash')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
   const l = useLocation()
+  const [toggleHashValue, setToggleHashValue] = useState(false)
   return (
     <div data-testid="special-hash-heading">
-      Hello "/specialChars/hash"!
-      <span data-testid="special-hash">{l.hash}</span>
+      <div>Hello "/specialChars/hash"!</div>
+      <button
+        className={
+          'mt-2 mb-2 px-1 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition duration-200'
+        }
+        data-testid="toggle-hash-button"
+        onClick={() => setToggleHashValue(!toggleHashValue)}
+      >
+        Toggle HashValue
+      </button>
+      <div>
+        {toggleHashValue && (
+          <div>
+            Hash Value<span data-testid="special-hash">{l.hash}</span>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

e2e/react-start/basic/src/routes/specialChars/route.tsx

@@ -46,9 +46,22 @@ function RouteComponent() {
           className: 'font-bold',
         }}
         hash={'대|'}
-        data-testid="special-hash-link"
+        data-testid="special-hash-link-1"
       >
-        Unicode Hash
+        Unicode Hash 대|
+      </Link>{' '}
+      <Link
+        to="/specialChars/hash"
+        activeOptions={{
+          includeHash: true,
+        }}
+        activeProps={{
+          className: 'font-bold',
+        }}
+        hash={'abc'}
+        data-testid="special-hash-link-2"
+      >
+        Unicode Hash abc
       </Link>{' '}
       <Link
         to="/specialChars/malformed"

e2e/react-start/basic/tests/special-characters.spec.ts

@@ -108,32 +108,48 @@ test.describe('Unicode route rendering', () => {
       page,
       baseURL,
     }) => {
-      await expect(page.getByTestId('special-hash-link')).not.toHaveClass(
+      await expect(page.getByTestId('special-hash-link-1')).not.toContainClass(
         'font-bold',
       )
+      await expect(page.getByTestId('special-hash-link-2')).not.toContainClass(
+        'font-bold',
+      )
+
       await page.goto('/specialChars/hash#대|')
 
       await page.waitForURL(`${baseURL}/specialChars/hash#%EB%8C%80|`)
       await page.waitForLoadState('load')
 
       await expect(page.getByTestId('special-hash-heading')).toBeInViewport()
 
-      const hashValue = await page.getByTestId('special-hash').textContent()
+      await expect(page.getByTestId('special-hash-link-1')).toContainClass(
+        'font-bold',
+      )
 
-      await expect(page.getByTestId('special-hash-link')).toHaveClass(
+      await expect(page.getByTestId('special-hash-link-2')).not.toContainClass(
         'font-bold',
       )
+
+      await page.getByTestId('toggle-hash-button').click()
+
+      const hashValue = await page.getByTestId('special-hash').textContent()
+
       expect(hashValue).toBe('대|')
     })
 
     test('should render route correctly on router navigation', async ({
       page,
       baseURL,
     }) => {
-      await expect(page.getByTestId('special-hash-link')).not.toHaveClass(
+      await expect(page.getByTestId('special-hash-link-1')).not.toContainClass(
         'font-bold',
       )
-      const link = page.getByTestId('special-hash-link')
+
+      await expect(page.getByTestId('special-hash-link-2')).not.toContainClass(
+        'font-bold',
+      )
+
+      const link = page.getByTestId('special-hash-link-1')
 
       await link.click()
 
@@ -142,11 +158,18 @@ test.describe('Unicode route rendering', () => {
 
       await expect(page.getByTestId('special-hash-heading')).toBeInViewport()
 
-      const hashValue = await page.getByTestId('special-hash').textContent()
+      await expect(page.getByTestId('special-hash-link-1')).toContainClass(
+        'font-bold',
+      )
 
-      await expect(page.getByTestId('special-hash-link')).toHaveClass(
+      await expect(page.getByTestId('special-hash-link-2')).not.toContainClass(
         'font-bold',
       )
+
+      await page.getByTestId('toggle-hash-button').click()
+
+      const hashValue = await page.getByTestId('special-hash').textContent()
+
       expect(hashValue).toBe('대|')
     })
   })

e2e/solid-start/basic/src/routes/specialChars/hash.tsx

@@ -1,22 +1,33 @@
 import { createFileRoute, useLocation } from '@tanstack/solid-router'
-import { createEffect, createSignal } from 'solid-js'
+import { createSignal } from 'solid-js'
 
 export const Route = createFileRoute('/specialChars/hash')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
   const location = useLocation()
-  const [getHash, setHash] = createSignal('')
-
-  createEffect(() => {
-    setHash(location().hash)
-  })
+  const [toggleHashValue, setToggleHashValue] = createSignal(false)
 
   return (
     <div data-testid="special-hash-heading">
-      Hello "/specialChars/hash"!
-      <span data-testid="special-hash">{getHash()}</span>
+      <div>Hello "/specialChars/hash"!</div>
+      <button
+        class={
+          'mt-2 mb-2 px-1 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition duration-200'
+        }
+        data-testid="toggle-hash-button"
+        onClick={() => setToggleHashValue(!toggleHashValue())}
+      >
+        Toggle HashValue
+      </button>
+      <div>
+        {toggleHashValue() && (
+          <div>
+            Hash Value<span data-testid="special-hash">{location().hash}</span>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

e2e/solid-start/basic/src/routes/specialChars/route.tsx

@@ -46,10 +46,23 @@ function RouteComponent() {
           class: 'font-bold',
         }}
         hash={'대|'}
-        data-testid="special-hash-link"
+        data-testid="special-hash-link-1"
       >
         Unicode Hash
       </Link>{' '}
+      <Link
+        to="/specialChars/hash"
+        activeOptions={{
+          includeHash: true,
+        }}
+        activeProps={{
+          class: 'font-bold',
+        }}
+        hash={'abc'}
+        data-testid="special-hash-link-2"
+      >
+        Unicode Hash abc
+      </Link>{' '}
       <Link
         to="/specialChars/malformed"
         activeProps={{

e2e/solid-start/basic/tests/special-characters.spec.ts

@@ -108,23 +108,32 @@ test.describe('Unicode route rendering', () => {
       page,
       baseURL,
     }) => {
-      await expect(page.getByTestId('special-hash-link')).not.toHaveClass(
+      await expect(page.getByTestId('special-hash-link-1')).not.toContainClass(
         'font-bold',
       )
+      await expect(page.getByTestId('special-hash-link-2')).not.toContainClass(
+        'font-bold',
+      )
+
       await page.goto('/specialChars/hash#대|')
 
       await page.waitForURL(`${baseURL}/specialChars/hash#%EB%8C%80|`)
       await page.waitForLoadState('load')
 
       await expect(page.getByTestId('special-hash-heading')).toBeInViewport()
 
-      const hashValue = await page.getByTestId('special-hash').textContent()
+      // TODO: this should work but seems to be a bug in reactivity on Solid Dynamic component. Still investigating.
+      // await expect(page.getByTestId('special-hash-link-1')).toContainClass(
+      //   'font-bold',
+      // )
+
+      await expect(page.getByTestId('special-hash-link-2')).not.toContainClass(
+        'font-bold',
+      )
 
-      const el = await page
-        .getByTestId('special-hash-link')
-        .evaluate((e) => e.classList.value)
+      await page.getByTestId('toggle-hash-button').click()
 
-      expect(el).toContain('font-bold')
+      const hashValue = await page.getByTestId('special-hash').textContent()
 
       expect(hashValue).toBe('대|')
     })
@@ -133,10 +142,15 @@ test.describe('Unicode route rendering', () => {
       page,
       baseURL,
     }) => {
-      await expect(page.getByTestId('special-hash-link')).not.toHaveClass(
+      await expect(page.getByTestId('special-hash-link-1')).not.toContainClass(
         'font-bold',
       )
-      const link = page.getByTestId('special-hash-link')
+
+      await expect(page.getByTestId('special-hash-link-2')).not.toContainClass(
+        'font-bold',
+      )
+
+      const link = page.getByTestId('special-hash-link-1')
 
       await link.click()
 
@@ -145,11 +159,18 @@ test.describe('Unicode route rendering', () => {
 
       await expect(page.getByTestId('special-hash-heading')).toBeInViewport()
 
-      const hashValue = await page.getByTestId('special-hash').textContent()
+      await expect(page.getByTestId('special-hash-link-1')).toContainClass(
+        'font-bold',
+      )
 
-      await expect(page.getByTestId('special-hash-link')).toHaveClass(
+      await expect(page.getByTestId('special-hash-link-2')).not.toContainClass(
         'font-bold',
       )
+
+      await page.getByTestId('toggle-hash-button').click()
+
+      const hashValue = await page.getByTestId('special-hash').textContent()
+
       expect(hashValue).toBe('대|')
     })
   })

e2e/vue-start/basic/src/routes/specialChars/hash.tsx

@@ -1,15 +1,39 @@
 import { createFileRoute, useLocation } from '@tanstack/vue-router'
+import { defineComponent, ref } from 'vue'
+
+const RouteComponent = defineComponent({
+  setup() {
+    const l = useLocation()
+    const toggleHashValue = ref(false)
+
+    const toggle = () => {
+      toggleHashValue.value = !toggleHashValue.value
+    }
+
+    return () => (
+      <div data-testid="special-hash-heading">
+        <div>Hello "/specialChars/hash"!</div>
+        <button
+          class={
+            'mt-2 mb-2 px-1 py-1 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition duration-200'
+          }
+          data-testid="toggle-hash-button"
+          onClick={toggle}
+        >
+          Toggle HashValue
+        </button>
+        <div>
+          {toggleHashValue.value && (
+            <div>
+              Hash Value<span data-testid="special-hash">{l.value.hash}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  },
+})
 
 export const Route = createFileRoute('/specialChars/hash')({
   component: RouteComponent,
 })
-
-function RouteComponent() {
-  const l = useLocation()
-  return (
-    <div data-testid="special-hash-heading">
-      Hello "/specialChars/hash"!
-      <span data-testid="special-hash">{l.value.hash}</span>
-    </div>
-  )
-}

e2e/vue-start/basic/src/routes/specialChars/route.tsx

@@ -46,10 +46,23 @@ function RouteComponent() {
           class: 'font-bold',
         }}
         hash={'대|'}
-        data-testid="special-hash-link"
+        data-testid="special-hash-link-1"
       >
         Unicode Hash
       </Link>{' '}
+      <Link
+        to="/specialChars/hash"
+        activeOptions={{
+          includeHash: true,
+        }}
+        activeProps={{
+          class: 'font-bold',
+        }}
+        hash={'abc'}
+        data-testid="special-hash-link-2"
+      >
+        Unicode Hash abc
+      </Link>{' '}
       <Link
         to="/specialChars/malformed"
         activeProps={{