Refactor path parameter usage in documentation#6042
Conversation
Route.useParams() returns a signal accessor that needs to be called like a function in order to access its properties.
WalkthroughDocumentation update for Solid router path-parameter access patterns. Template mappings are changed from property-call syntax (e.g., Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/router/framework/solid/guide/path-params.md(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (AGENTS.md)
Use relative links to
docs/folder format (e.g.,./guide/data-loading) for internal documentation references
Files:
docs/router/framework/solid/guide/path-params.md
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.210Z
Learning: Implement type-safe routing with search params and path params
Learnt from: nlynzaad
Repo: TanStack/router PR: 5182
File: e2e/react-router/basic-file-based/src/routes/non-nested/named/$baz_.bar.tsx:3-5
Timestamp: 2025-09-22T00:56:49.237Z
Learning: In TanStack Router, underscores are intentionally stripped from route segments (e.g., `$baz_` becomes `baz` in generated types) but should be preserved in base path segments. This is the correct behavior as of the fix in PR #5182.
Learnt from: nlynzaad
Repo: TanStack/router PR: 5284
File: e2e/react-start/basic/server.js:50-0
Timestamp: 2025-09-28T21:41:45.233Z
Learning: In Express v5, catch-all routes must use named wildcards. Use `/*splat` to match everything except root path, or `/{*splat}` (with braces) to match including root path. The old `*` syntax is not allowed and will cause "Missing parameter name" errors. This breaking change requires explicit naming of wildcard parameters.
Learnt from: nlynzaad
Repo: TanStack/router PR: 5182
File: e2e/react-router/basic-file-based/tests/non-nested-paths.spec.ts:167-172
Timestamp: 2025-09-22T00:56:53.426Z
Learning: In TanStack Router, underscores are intentionally stripped from route segments during path parsing, but preserved in base path segments. This is the expected behavior implemented in PR #5182.
📚 Learning: 2025-09-28T21:41:45.233Z
Learnt from: nlynzaad
Repo: TanStack/router PR: 5284
File: e2e/react-start/basic/server.js:50-0
Timestamp: 2025-09-28T21:41:45.233Z
Learning: In Express v5, catch-all routes must use named wildcards. Use `/*splat` to match everything except root path, or `/{*splat}` (with braces) to match including root path. The old `*` syntax is not allowed and will cause "Missing parameter name" errors. This breaking change requires explicit naming of wildcard parameters.
Applied to files:
docs/router/framework/solid/guide/path-params.md
📚 Learning: 2025-12-06T15:03:07.210Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.210Z
Learning: Implement type-safe routing with search params and path params
Applied to files:
docs/router/framework/solid/guide/path-params.md
| '{postId}': '{params().postId}', | ||
| '{userId}': '{params().userId}', | ||
| '{fileName}': '{params().userId}', | ||
| '{_splat}': '{params()._splat}', |
There was a problem hiding this comment.
Fix incorrect template mapping on line 12.
Line 12 contains a copy-paste error: '{fileName}': '{params().userId}' should use params().fileName instead of params().userId. This will cause documentation examples using fileName parameters to render incorrect code samples.
Apply this diff to fix the mapping:
{
'react-router': 'solid-router',
'{ postId } = Route.useParams()': 'params = Route.useParams',
'{ fileName } = Route.useParams()': 'params = Route.useParams',
'{ userId } = Route.useParams()': 'params = Route.useParams',
'{ _splat } = Route.useParams()': 'params = Route.useParams',
'{postId}': '{params().postId}',
'{userId}': '{params().userId}',
- '{fileName}': '{params().userId}',
+ '{fileName}': '{params().fileName}',
'{_splat}': '{params()._splat}',
}The other mappings on lines 10, 11, and 13 correctly update the Solid signal accessor syntax from the incorrect params.propName() pattern to the correct params().propName pattern.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| '{postId}': '{params().postId}', | |
| '{userId}': '{params().userId}', | |
| '{fileName}': '{params().userId}', | |
| '{_splat}': '{params()._splat}', | |
| '{postId}': '{params().postId}', | |
| '{userId}': '{params().userId}', | |
| '{fileName}': '{params().fileName}', | |
| '{_splat}': '{params()._splat}', |
🤖 Prompt for AI Agents
In docs/router/framework/solid/guide/path-params.md around lines 10 to 13 there
is a copy-paste error mapping '{fileName}': '{params().userId}' — change it to
use the correct Solid signal accessor for fileName by mapping '{fileName}' to
'{params().fileName}' so the example shows params().fileName rather than
params().userId; leave the other mappings as-is.
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
|
View your CI Pipeline Execution ↗ for commit 46eba57
☁️ Nx Cloud last updated this comment at |
Route.useParams() returns a signal accessor that needs to be called like a function in order to access its properties.
3 participants
Route.useParams() returns a signal accessor that needs to be called like a function in order to access its properties.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.