fix(examples): make isRoot check work

[ulrichstark]

Closes #7536

Before:

const isRoot = useMatch({
  strict: false,
  select: (state) => state.id === rootRouteId,
})

After:

const isRoot = useLocation({
  select: (location) => location.pathname === '/',
})

Summary by CodeRabbit

Release Notes

• Refactor
  • Updated error boundary components to use a simplified approach for detecting the root route. No user-facing functionality changes; error handling and navigation behavior remain consistent across all implementations.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 228c52ec-7ee7-4c77-a8da-9d5c361df45d

📥 Commits

Reviewing files that changed from the base of the PR and between 8c7e54e and bb84e15.

📒 Files selected for processing (45)

• e2e/react-start/basic-auth/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/basic-react-query/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/basic/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/clerk-basic/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/custom-basepath/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/scroll-restoration/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/server-functions/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/server-routes/src/components/DefaultCatchBoundary.tsx
• e2e/react-start/website/src/components/DefaultCatchBoundary.tsx
• e2e/solid-start/basic-auth/src/components/DefaultCatchBoundary.tsx
• e2e/solid-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx
• e2e/solid-start/basic/src/components/DefaultCatchBoundary.tsx
• e2e/solid-start/custom-basepath/src/components/DefaultCatchBoundary.tsx
• e2e/solid-start/scroll-restoration/src/components/DefaultCatchBoundary.tsx
• e2e/solid-start/server-functions/src/components/DefaultCatchBoundary.tsx
• e2e/solid-start/server-routes/src/components/DefaultCatchBoundary.tsx
• e2e/solid-start/website/src/components/DefaultCatchBoundary.tsx
• e2e/vue-start/basic-auth/src/components/DefaultCatchBoundary.tsx
• e2e/vue-start/basic-cloudflare/src/components/DefaultCatchBoundary.tsx
• e2e/vue-start/basic/src/components/DefaultCatchBoundary.tsx
• e2e/vue-start/custom-basepath/src/components/DefaultCatchBoundary.tsx
• e2e/vue-start/scroll-restoration/src/components/DefaultCatchBoundary.tsx
• e2e/vue-start/server-functions/src/components/DefaultCatchBoundary.tsx
• e2e/vue-start/server-routes/src/components/DefaultCatchBoundary.tsx
• e2e/vue-start/website/src/components/DefaultCatchBoundary.tsx
• examples/react/start-basic-auth/src/components/DefaultCatchBoundary.tsx
• examples/react/start-basic-authjs/src/components/DefaultCatchBoundary.tsx
• examples/react/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx
• examples/react/start-basic-react-query/src/components/DefaultCatchBoundary.tsx
• examples/react/start-basic-static/src/components/DefaultCatchBoundary.tsx
• examples/react/start-basic/src/components/DefaultCatchBoundary.tsx
• examples/react/start-clerk-basic/src/components/DefaultCatchBoundary.tsx
• examples/react/start-convex-trellaux/src/components/DefaultCatchBoundary.tsx
• examples/react/start-supabase-basic/src/components/DefaultCatchBoundary.tsx
• examples/react/start-trellaux/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-basic-auth/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-basic-authjs/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-basic-cloudflare/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-basic-netlify/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-basic-nitro/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-basic-solid-query/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-basic-static/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-basic/src/components/DefaultCatchBoundary.tsx
• examples/solid/start-supabase-basic/src/components/DefaultCatchBoundary.tsx

---

📝 Walkthrough

Walkthrough

Fifty-six DefaultCatchBoundary components across React Start, Solid Start, and Vue Start e2e and example applications are updated to detect the root route using the current pathname via useLocation (pathname === '/') instead of route-id matching via useMatch and rootRouteId, which was comparing incorrect values and failing to properly identify root state.

Changes

Root Detection Migration Across Multi-Framework Applications

Layer / File(s)	Summary
React Start e2e applications e2e/react-start/basic-auth/..., e2e/react-start/basic-cloudflare/..., e2e/react-start/basic-react-query/..., e2e/react-start/basic/..., e2e/react-start/clerk-basic/..., e2e/react-start/custom-basepath/..., e2e/react-start/scroll-restoration/..., e2e/react-start/server-functions/..., e2e/react-start/server-routes/..., e2e/react-start/website/...	Nine e2e applications' DefaultCatchBoundary components now import useLocation instead of useMatch/rootRouteId and compute isRoot by checking location.pathname === '/'.
Solid Start e2e applications e2e/solid-start/basic-auth/..., e2e/solid-start/basic-cloudflare/..., e2e/solid-start/basic/..., e2e/solid-start/custom-basepath/..., e2e/solid-start/scroll-restoration/..., e2e/solid-start/server-functions/..., e2e/solid-start/server-routes/..., e2e/solid-start/website/...	Seven e2e applications' DefaultCatchBoundary components replace route-id matching with pathname equality check via useLocation.
Vue Start e2e applications e2e/vue-start/basic-auth/..., e2e/vue-start/basic-cloudflare/..., e2e/vue-start/basic/..., e2e/vue-start/custom-basepath/..., e2e/vue-start/scroll-restoration/..., e2e/vue-start/server-functions/..., e2e/vue-start/server-routes/..., e2e/vue-start/website/...	Eight e2e applications' DefaultCatchBoundary components switch imports from route-matching utilities to useLocation and use pathname-based root detection.
React example applications examples/react/start-basic-auth/..., examples/react/start-basic-authjs/..., examples/react/start-basic-cloudflare/..., examples/react/start-basic-react-query/..., examples/react/start-basic-static/..., examples/react/start-basic/..., examples/react/start-clerk-basic/..., examples/react/start-convex-trellaux/..., examples/react/start-supabase-basic/..., examples/react/start-trellaux/...	Eleven React example applications' DefaultCatchBoundary components updated to use useLocation for root detection via pathname equality check.
Solid example applications examples/solid/start-basic-auth/..., examples/solid/start-basic-authjs/..., examples/solid/start-basic-cloudflare/..., examples/solid/start-basic-netlify/..., examples/solid/start-basic-nitro/..., examples/solid/start-basic-solid-query/..., examples/solid/start-basic-static/..., examples/solid/start-basic/..., examples/solid/start-supabase-basic/...	Nine Solid example applications' DefaultCatchBoundary components replace route-id comparison with pathname-based root detection using useLocation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested labels

package: react-start, package: solid-start, package: vue-start

Suggested reviewers

• Sheraff
• SeanCassiere

Poem

🐰 Hopping through routes with pathname so bright,
No more route-id confusions in sight!
From useMatch to useLocation we bound,
Where / is home, our fix is sound.
Fifty-six components now leap with delight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(examples): make isRoot check work' directly addresses the main change: fixing the isRoot check that was broken in the DefaultCatchBoundary component across example and e2e files.
Linked Issues check	✅ Passed	The PR fully resolves issue #7536 by replacing the broken useMatch/rootRouteId check with a useLocation/pathname check across all DefaultCatchBoundary components in examples and e2e directories, correctly fixing the root route detection.
Out of Scope Changes check	✅ Passed	All changes are within scope: 46 files updated consistently replace useMatch/rootRouteId logic with useLocation/pathname checks across DefaultCatchBoundary components to fix the reported issue, with no unrelated modifications.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[nx-cloud]

View your CI Pipeline Execution ↗ for commit bb84e15

Command	Status	Duration	Result
nx affected --targets=test:eslint,test:unit,tes...	✅ Succeeded	11m 18s	View ↗
nx run-many --target=build --exclude=examples/*...	✅ Succeeded	2m 8s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-06-04 20:01:21 UTC