docs(solid-router): path params #6096
Conversation
WalkthroughThis pull request replaces a Solid path-params documentation stub with a comprehensive guide covering path parameter fundamentals, including multiple usage examples with loaders and components, optional parameters, prefixes and suffixes, i18n patterns, type safety, and SEO considerations. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10–15 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
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 |
|
View your CI Pipeline Execution ↗ for commit dfd784d
☁️ Nx Cloud last updated this comment at |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
docs/router/framework/solid/guide/path-params.md (2)
187-187: Reduce repetitive phrasing to improve readability.The phrase "if you want to match a URL that" appears multiple times in nearby sections. Consider replacing one instance with an alternative phrasing for variety.
552-552: Add hyphen to compound adjective."sophisticated language switching" should be "sophisticated language-switching" when used as a compound adjective before the noun.
📜 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 (6)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Implement type-safe routing with search params and path params
📚 Learning: 2025-12-06T15:03:07.223Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-06T15:03:07.223Z
Learning: Implement type-safe routing with search params and path params
Applied to files:
docs/router/framework/solid/guide/path-params.md
📚 Learning: 2025-09-22T00:56:53.426Z
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.
Applied to files:
docs/router/framework/solid/guide/path-params.md
📚 Learning: 2025-09-22T00:56:49.237Z
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.
Applied to files:
docs/router/framework/solid/guide/path-params.md
📚 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-10-14T18:59:33.990Z
Learnt from: FatahChan
Repo: TanStack/router PR: 5475
File: e2e/react-start/basic-prerendering/src/routes/redirect/$target/via-beforeLoad.tsx:8-0
Timestamp: 2025-10-14T18:59:33.990Z
Learning: In TanStack Router e2e test files, when a route parameter is validated at the route level (e.g., using zod in validateSearch or param validation), switch statements on that parameter do not require a default case, as the validation ensures only expected values will reach the switch.
Applied to files:
docs/router/framework/solid/guide/path-params.md
🪛 LanguageTool
docs/router/framework/solid/guide/path-params.md
[style] ~187-~187: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...c routing patterns. For example, if you want to match a URL that starts with user- an...
(REP_WANT_TO_VB)
[grammar] ~552-~552: Use a hyphen to join words.
Context: ... also create more sophisticated language switching logic: ```tsx function Advanc...
(QB_NEW_EN_HYPHEN)
🪛 markdownlint-cli2 (0.18.1)
docs/router/framework/solid/guide/path-params.md
395-395: Hard tabs
Column: 1
(MD010, no-hard-tabs)
396-396: Hard tabs
Column: 1
(MD010, no-hard-tabs)
398-398: Hard tabs
Column: 1
(MD010, no-hard-tabs)
399-399: Hard tabs
Column: 1
(MD010, no-hard-tabs)
401-401: Hard tabs
Column: 1
(MD010, no-hard-tabs)
406-406: Hard tabs
Column: 1
(MD010, no-hard-tabs)
407-407: Hard tabs
Column: 1
(MD010, no-hard-tabs)
409-409: Hard tabs
Column: 1
(MD010, no-hard-tabs)
413-413: Hard tabs
Column: 1
(MD010, no-hard-tabs)
414-414: Hard tabs
Column: 1
(MD010, no-hard-tabs)
416-416: Hard tabs
Column: 1
(MD010, no-hard-tabs)
701-701: Hard tabs
Column: 1
(MD010, no-hard-tabs)
705-705: Hard tabs
Column: 1
(MD010, no-hard-tabs)
706-706: Hard tabs
Column: 1
(MD010, no-hard-tabs)
708-708: Hard tabs
Column: 1
(MD010, no-hard-tabs)
709-709: Hard tabs
Column: 1
(MD010, no-hard-tabs)
710-710: Hard tabs
Column: 1
(MD010, no-hard-tabs)
711-711: Hard tabs
Column: 1
(MD010, no-hard-tabs)
712-712: Hard tabs
Column: 1
(MD010, no-hard-tabs)
713-713: Hard tabs
Column: 1
(MD010, no-hard-tabs)
714-714: Hard tabs
Column: 1
(MD010, no-hard-tabs)
716-716: Hard tabs
Column: 1
(MD010, no-hard-tabs)
717-717: Hard tabs
Column: 1
(MD010, no-hard-tabs)
718-718: Hard tabs
Column: 1
(MD010, no-hard-tabs)
719-719: Hard tabs
Column: 1
(MD010, no-hard-tabs)
720-720: Hard tabs
Column: 1
(MD010, no-hard-tabs)
721-721: Hard tabs
Column: 1
(MD010, no-hard-tabs)
725-725: Hard tabs
Column: 1
(MD010, no-hard-tabs)
726-726: Hard tabs
Column: 1
(MD010, no-hard-tabs)
728-728: Hard tabs
Column: 1
(MD010, no-hard-tabs)
729-729: Hard tabs
Column: 1
(MD010, no-hard-tabs)
731-731: Hard tabs
Column: 1
(MD010, no-hard-tabs)
732-732: Hard tabs
Column: 1
(MD010, no-hard-tabs)
733-733: Hard tabs
Column: 1
(MD010, no-hard-tabs)
734-734: Hard tabs
Column: 1
(MD010, no-hard-tabs)
735-735: Hard tabs
Column: 1
(MD010, no-hard-tabs)
736-736: Hard tabs
Column: 1
(MD010, no-hard-tabs)
737-737: Hard tabs
Column: 1
(MD010, no-hard-tabs)
738-738: Hard tabs
Column: 1
(MD010, no-hard-tabs)
739-739: Hard tabs
Column: 1
(MD010, no-hard-tabs)
740-740: Hard tabs
Column: 1
(MD010, no-hard-tabs)
741-741: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🔇 Additional comments (1)
docs/router/framework/solid/guide/path-params.md (1)
71-71: Fix broken documentation link at line 749.The link at line 71 (
./code-splitting.md) resolves correctly. However, the link at line 749 (../api/router/RouterOptionsType.md) references a non-existent file.RouterOptionsType.mdexists only in the React framework documentation, not in the Solid framework. Either update this link to point to the React version or create a Solid-specific version of this file.⛔ Skipped due to learnings
Learnt from: CR Repo: TanStack/router PR: 0 File: AGENTS.md:0-0 Timestamp: 2025-12-06T15:03:07.223Z Learning: Applies to docs/**/*.{md,mdx} : Use relative links to `docs/` folder format (e.g., `./guide/data-loading`) for internal documentation referencesLearnt from: schiller-manuel Repo: TanStack/router PR: 5330 File: packages/router-core/src/router.ts:2231-2245 Timestamp: 2025-10-01T18:30:26.591Z Learning: In `packages/router-core/src/router.ts`, the `resolveRedirect` method intentionally strips the router's origin from redirect URLs when they match (e.g., `https://foo.com/bar` → `/bar` for same-origin redirects) while preserving the full URL for cross-origin redirects. This logic should not be removed or simplified to use `location.publicHref` directly.
| ```tsx | ||
| import { createFileRoute } from '@tanstack/react-router' | ||
|
|
||
| export const Route = createFileRoute('/posts/$postId')({ | ||
| loader: async ({ params }) => { | ||
| return fetchPost(params.postId) | ||
| }, | ||
| }) | ||
| ``` |
There was a problem hiding this comment.
Replace React imports with Solid Router imports throughout all code examples.
This documentation is for Solid Router, but all code examples use @tanstack/react-router and React-style patterns. Per the PR objective to "port the entire page to Solid," these examples need to be converted to use @tanstack/solid-router.
Update all import statements and code examples to use @tanstack/solid-router. For example:
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/solid-router'Also ensure hooks like useParams() and components like <Link> use Solid Router's APIs (e.g., Route.useParams() should use Solid's equivalent pattern).
Also applies to: 38-44, 49-54, 61-69, 90-98, 103-110, 124-135, 139-151
| // TypeScript knows category might be undefined | ||
| const params = Route.useParams() // category: string | undefined | ||
|
|
||
| // Safe navigation | ||
| const categoryUpper = params().category?.toUpperCase() | ||
|
|
||
| return <div>{categoryUpper || 'All Categories'}</div> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check for hard tabs in the markdown file at the specified line ranges
grep -n $'\t' docs/router/framework/solid/guide/path-params.md | grep -E '(39[5-9]|40[0-6]|40[7-9]|41[0-6]|70[1-9]|7[1-3][0-9]|74[0-1])'Repository: TanStack/router
Length of output: 1569
🏁 Script executed:
# Also show the actual content around those lines to see the tabs clearly
echo "=== Lines 395-401 ===" && sed -n '395,401p' docs/router/framework/solid/guide/path-params.md | cat -A
echo "=== Lines 406-416 ===" && sed -n '406,416p' docs/router/framework/solid/guide/path-params.md | cat -A
echo "=== Lines 701-741 ===" && sed -n '701,741p' docs/router/framework/solid/guide/path-params.md | cat -ARepository: TanStack/router
Length of output: 1759
Replace hard tabs with spaces in code blocks.
Code blocks throughout this file use hard tabs for indentation instead of spaces. This violates MD010 (markdownlint rule for hard tabs) and causes inconsistent markdown formatting. Replace all indentation tabs with spaces (typically 2 or 4 spaces per level) in the affected code blocks.
Applies to lines 395-401, 406-416, and 701-741.
🧰 Tools
🪛 markdownlint-cli2 (0.18.1)
395-395: Hard tabs
Column: 1
(MD010, no-hard-tabs)
396-396: Hard tabs
Column: 1
(MD010, no-hard-tabs)
398-398: Hard tabs
Column: 1
(MD010, no-hard-tabs)
399-399: Hard tabs
Column: 1
(MD010, no-hard-tabs)
401-401: Hard tabs
Column: 1
(MD010, no-hard-tabs)
🤖 Prompt for AI Agents
In docs/router/framework/solid/guide/path-params.md around lines 395-401 (also
fix occurrences at 406-416 and 701-741), replace all hard tab characters used
for indentation inside the affected code blocks with spaces (use a consistent
width, e.g. 2 or 4 spaces per indent level). Ensure you only modify whitespace
within fenced code blocks and preserve existing line breaks and code content;
run a markdownlint check to confirm MD010 is resolved.
| function HomeComponent() { | ||
| const params = Route.useParams() | ||
| const isRTL = ['ar', 'he', 'fa'].includes(locale || '') | ||
|
|
||
| return ( | ||
| <div dir={isRTL ? 'rtl' : 'ltr'}> | ||
| <h1>Welcome ({params().locale || 'en'})</h1> | ||
| {/* Localized content */} | ||
| </div> | ||
| ) | ||
| } | ||
| ``` |
There was a problem hiding this comment.
Undefined variable reference: use params().locale instead of locale.
Line 622 references the variable locale directly, but it was never declared in the component's scope. Based on the established pattern throughout the document, it should be params().locale.
Apply this diff:
function HomeComponent() {
const params = Route.useParams()
- const isRTL = ['ar', 'he', 'fa'].includes(locale || '')
+ const isRTL = ['ar', 'he', 'fa'].includes(params().locale || '')📝 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.
| function HomeComponent() { | |
| const params = Route.useParams() | |
| const isRTL = ['ar', 'he', 'fa'].includes(locale || '') | |
| return ( | |
| <div dir={isRTL ? 'rtl' : 'ltr'}> | |
| <h1>Welcome ({params().locale || 'en'})</h1> | |
| {/* Localized content */} | |
| </div> | |
| ) | |
| } | |
| ``` | |
| function HomeComponent() { | |
| const params = Route.useParams() | |
| const isRTL = ['ar', 'he', 'fa'].includes(params().locale || '') | |
| return ( | |
| <div dir={isRTL ? 'rtl' : 'ltr'}> | |
| <h1>Welcome ({params().locale || 'en'})</h1> | |
| {/* Localized content */} | |
| </div> | |
| ) | |
| } |
🤖 Prompt for AI Agents
In docs/router/framework/solid/guide/path-params.md around lines 620 to 631, the
component references an undeclared variable `locale`; change uses of `locale` to
`params().locale` (e.g., set isRTL = ['ar','he','fa'].includes(params().locale
|| '') and any other occurrences) so the component reads the route param
correctly and avoids the undefined variable.
Follow up to
Porting the entire page to solid, because it's easier to maintain than extensive find/replace
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.