fix(solid-start): make Link active class reactive for include hash by nlynzaad · Pull Request #6607 · TanStack/router

nlynzaad · 2026-02-07T01:36:00Z

As part of #6416 and #6421 it was picked up that setting class active options was not functioning as expected when including hash during SSR rendering.

url hash fragments do not get sent to the server, this is only available on the client. so during SSR the url hash would not match next path and the active class options would not be applied. When the client is hydrating the isActive class, although now true, did not cause a rerender of the component to reflect the active status.

This was resolved in #6421 for React but not for Solid, Vue was working correctly.

This PR makes isActive reactive to the change in hydration status and applies the hash check correctly.

Summary by CodeRabbit

Bug Fixes
- Improved active link detection reliability with better state management and consistency across routing scenarios.
- Enhanced server-side rendering support for hash-based route activation with improved hydration awareness.
- Refined search parameter handling in link activation logic for more accurate behavior.
Tests
- Enabled assertion for Unicode route hash navigation validation.

coderabbitai · 2026-02-07T01:36:24Z

📝 Walkthrough

Walkthrough

The PR refactors solid-router's link activation logic to use memoized currentLocation state with server-side rendering and hydration awareness, and enables a previously commented test assertion for hash-based link styling behavior.

Changes

Cohort / File(s)	Summary
Link Activation Logic Refactoring `packages/solid-router/src/link.tsx`	Major rewrite of active-link determination to use memoized currentLocation state instead of useRouterState snapshots. Adds SSR/hydration awareness for hash comparisons with hasHydrated guards, introduces deep equality checking for search parameters when includeSearch is enabled, and reorganizes control flow for exact vs. fuzzy path matching.
Test Assertion Update `e2e/solid-start/basic/tests/special-characters.spec.ts`	Enables previously commented assertion verifying that special-hash-link-1 element receives font-bold styling after hash navigation, aligning behavior validation with similar assertions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

fix: encoded url hash fragment matching #6416: Updates hash link matching and E2E tests for special characters in hash-based navigation.
refactor: react link ssr perf #6482: Modifies link activation logic with SSR/hydration awareness and search/hash parameter handling.
fix(react-start): Apply Link active properties correctly on SSR when including hash #6421: Changes includeHash handling with hydration-aware hash comparisons in link activation.

Suggested reviewers

birkskyum
schiller-manuel

Poem

🐰 A link that remembers where hydration began,
Hash-aware and SSR-savvy, a most clever plan,
Search and path dance together with grace,
Now tests confirm bold styling finds its place! 🎯

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing the Link active class reactivity for hash-based route matching in solid-start.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch solid-start-url-hash-active

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

nx-cloud · 2026-02-07T01:36:29Z

View your CI Pipeline Execution ↗ for commit 71879ea

Command	Status	Duration	Result
`nx affected --targets=test:eslint,test:unit,tes...`	✅ Succeeded	7m 30s	View ↗
`nx run-many --target=build --exclude=examples/*...`	✅ Succeeded	42s	View ↗

☁️ Nx Cloud last updated this comment at 2026-02-07 01:46:08 UTC

pkg-pr-new · 2026-02-07T01:42:48Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@6607

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@6607

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@6607

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@6607

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@6607

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@6607

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@6607

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@6607

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@6607

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@6607

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@6607

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@6607

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@6607

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@6607

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@6607

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@6607

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@6607

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@6607

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@6607

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@6607

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@6607

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@6607

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@6607

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@6607

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@6607

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@6607

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-fn-stubs@6607

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@6607

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@6607

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@6607

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@6607

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@6607

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@6607

@tanstack/vue-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router@6607

@tanstack/vue-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-devtools@6607

@tanstack/vue-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-router-ssr-query@6607

@tanstack/vue-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start@6607

@tanstack/vue-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start-client@6607

@tanstack/vue-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/vue-start-server@6607

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@6607

commit: 71879ea

…6607) solid-start: make Link active class reactive for include hash

solid-start: make Link active class reactive for include hash
a1498f9

nlynzaad requested a review from birkskyum February 7, 2026 01:36

github-actionsBot added the package: solid-router label Feb 7, 2026

Merge branch 'main' into solid-start-url-hash-active
71879ea

nlynzaad merged commit 972d347 into mainFeb 7, 2026
6 checks passed

nlynzaad deleted the solid-start-url-hash-active branch February 7, 2026 02:06

Sheraff pushed a commit that referenced this pull request Feb 15, 2026
fix(solid-start): make Link active class reactive for include hash (#…
0ddbbc0
…6607) solid-start: make Link active class reactive for include hash

schiller-manuel mentioned this pull request Feb 15, 2026
[solid-start] Browser hangs when navigating on mount in v1.159.1 and forward #6672
Closed

This was referenced Feb 17, 2026
test/docs: clarify exact link matching with includeSearch #6690
Closed
fix(react-router): keep relative link active when changing inherited param #6689
Merged

Navigation Menu

Uh oh!

Uh oh!

fix(solid-start): make Link active class reactive for include hash - #6607

fix(solid-start): make Link active class reactive for include hash#6607
nlynzaad merged 2 commits into
mainfrom
solid-start-url-hash-active

nlynzaad commented Feb 7, 2026•
edited by coderabbitai Bot
Loading

Uh oh!

coderabbitaiBot commented Feb 7, 2026•
edited
Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

nx-cloudBot commented Feb 7, 2026•
edited
Loading

Uh oh!

pkg-pr-newBot commented Feb 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Uh oh!

Conversation

nlynzaad commented Feb 7, 2026• edited by coderabbitai BotLoading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitaiBot commented Feb 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

nx-cloudBot commented Feb 7, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-newBot commented Feb 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

nlynzaad commented Feb 7, 2026•
edited by coderabbitai Bot
Loading

coderabbitaiBot commented Feb 7, 2026•
edited
Loading

nx-cloudBot commented Feb 7, 2026•
edited
Loading