docs(router): add "How To" section to docs navigation sidebar by sleitor · Pull Request #6804 · TanStack/router

sleitor · 2026-03-03T02:31:22Z

Summary

The docs/router/how-to/ directory contains 20+ focused, step-by-step guides covering authentication, search params, testing, SSR, deployment, UI library integration, and more — but none of them appeared in the docs navigation sidebar.

This PR adds a "How To" section to docs/router/config.json, positioned between "Guides" and "API", with entries for all existing how-to guides:

Install TanStack Router
Use Environment Variables
Deploy to Production
Set Up SSR
Migrate from React Router
Set Up Authentication / Auth Providers / RBAC
Navigate / Set Up / Validate / Share Search Params
Arrays, Objects & Dates in Search Params
Set Up Testing / Test File-Based Routing
Debug Router Issues
Integrate Shadcn UI / Material UI / Chakra UI / Framer Motion

Changes

docs/router/config.json: add "How To" section with 20 entries

Summary by CodeRabbit

Documentation
- Added comprehensive "How To" guides section with 20 new articles covering essential topics including installation, deployment, authentication, search parameters, testing, debugging, and integration with popular UI frameworks.

The how-to/ directory contains 20+ step-by-step guides covering authentication, search params, testing, SSR, UI integrations, and more, but none of them were linked from the docs navigation config. Add a new 'How To' section to docs/router/config.json between 'Guides' and 'API' with entries for all existing how-to guides. FixesTanStack#6801

coderabbitai · 2026-03-03T02:31:45Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1acc8ea and fe88fa6.

📒 Files selected for processing (1)

docs/router/config.json

📝 Walkthrough

Walkthrough

A new "How To" section with 20 guide items is added to the TanStack Router documentation navigation configuration, including guides for installation, environment variables, deployment, SSR, authentication, search parameters, testing, debugging, and UI framework integrations.

Changes

Cohort / File(s)	Summary
Documentation Configuration `docs/router/config.json`	Added new "How To" section with 20 guide items covering installation, deployment, authentication, search parameters, testing, debugging, and UI framework integrations. Includes empty framework children arrays for react and solid.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

docs: Update Some Router Docs #5443: Modifies docs/router navigation structure, specifically handling the "How-To" section reorganization alongside other navigation updates.
docs(router): restructure docs to use the unified markdown syntax #6665: Adjusts docs/router/config.json top-level sections structure and framework children configuration.
docs: move the react-only guides to top-level and restrict in config.json #6713: Updates docs/router/config.json paths and placement for migration and how-to guides.

Suggested labels

documentation

Poem

🐰 A nav so grand, with guides galore,
How-tos aplenty, we now explore,
From SSR to auth so keen,
The finest docs you've ever seen! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: adding a 'How To' section to the docs navigation sidebar in the router configuration.
Linked Issues check	✅ Passed	The PR adds a 'How To' section to docs/router/config.json with 20 how-to guides, directly addressing issue `#6801`'s requirement to make the existing how-to directory discoverable in the navigation sidebar.
Out of Scope Changes check	✅ Passed	All changes are scoped to adding the 'How To' section to the navigation configuration; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

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

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

nx-cloud · 2026-03-03T02:32:07Z

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

_{To disable these notifications, a workspace admin can disable them in workspace settings.}

View your CI Pipeline Execution ↗ for commit fe88fa6

Command	Status	Duration	Result
`nx run @benchmarks/client-nav:test:perf:solid`	❌ Failed	1m 14s	View ↗
`nx run @benchmarks/client-nav:test:perf:vue`	✅ Succeeded	1m 25s	View ↗
`nx run @benchmarks/client-nav:test:perf:react`	✅ Succeeded	1m 27s	View ↗

☁️ Nx Cloud last updated this comment at 2026-03-03 02:39:22 UTC

pkg-pr-new · 2026-03-03T02:33:41Z

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/@tanstack/arktype-adapter@6804

@tanstack/eslint-plugin-router

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

@tanstack/history

npm i https://pkg.pr.new/@tanstack/history@6804

@tanstack/nitro-v2-vite-plugin

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

@tanstack/react-router

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

@tanstack/react-router-devtools

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

@tanstack/react-router-ssr-query

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

@tanstack/react-start

npm i https://pkg.pr.new/@tanstack/react-start@6804

@tanstack/react-start-client

npm i https://pkg.pr.new/@tanstack/react-start-client@6804

@tanstack/react-start-server

npm i https://pkg.pr.new/@tanstack/react-start-server@6804

@tanstack/router-cli

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

@tanstack/router-core

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

@tanstack/router-devtools

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

@tanstack/router-devtools-core

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

@tanstack/router-generator

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

@tanstack/router-plugin

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

@tanstack/router-ssr-query-core

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

@tanstack/router-utils

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

@tanstack/router-vite-plugin

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

@tanstack/solid-router

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

@tanstack/solid-router-devtools

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

@tanstack/solid-router-ssr-query

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

@tanstack/solid-start

npm i https://pkg.pr.new/@tanstack/solid-start@6804

@tanstack/solid-start-client

npm i https://pkg.pr.new/@tanstack/solid-start-client@6804

@tanstack/solid-start-server

npm i https://pkg.pr.new/@tanstack/solid-start-server@6804

@tanstack/start-client-core

npm i https://pkg.pr.new/@tanstack/start-client-core@6804

@tanstack/start-fn-stubs

npm i https://pkg.pr.new/@tanstack/start-fn-stubs@6804

@tanstack/start-plugin-core

npm i https://pkg.pr.new/@tanstack/start-plugin-core@6804

@tanstack/start-server-core

npm i https://pkg.pr.new/@tanstack/start-server-core@6804

@tanstack/start-static-server-functions

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

@tanstack/start-storage-context

npm i https://pkg.pr.new/@tanstack/start-storage-context@6804

@tanstack/valibot-adapter

npm i https://pkg.pr.new/@tanstack/valibot-adapter@6804

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/@tanstack/virtual-file-routes@6804

@tanstack/vue-router

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

@tanstack/vue-router-devtools

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

@tanstack/vue-router-ssr-query

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

@tanstack/vue-start

npm i https://pkg.pr.new/@tanstack/vue-start@6804

@tanstack/vue-start-client

npm i https://pkg.pr.new/@tanstack/vue-start-client@6804

@tanstack/vue-start-server

npm i https://pkg.pr.new/@tanstack/vue-start-server@6804

@tanstack/zod-adapter

npm i https://pkg.pr.new/@tanstack/zod-adapter@6804

commit: a3e8628

github-actions · 2026-03-03T02:34:31Z

Bundle Size Benchmarks

Commit: 1acc8eaf3a07
Measured at: 2026-03-03T02:33:42.982Z
Baseline source: history:1acc8eaf3a07
Dashboard: bundle-size history

Scenario	Current (gzip)	Delta vs baseline	Raw	Brotli	Trend
`react-router.minimal`	86.58 KiB	0 B (0.00%)	272.45 KiB	75.22 KiB	▅▅▅▅▅▅▅▅▅▅▅
`react-router.full`	89.61 KiB	0 B (0.00%)	282.78 KiB	77.90 KiB	▅▅▅▅▅▅▅▅▅▅▅
`solid-router.minimal`	35.88 KiB	0 B (0.00%)	107.56 KiB	32.26 KiB	▅▅▅▅▅▅▅▅▅▅▅
`solid-router.full`	40.21 KiB	0 B (0.00%)	120.61 KiB	36.13 KiB	▅▅▅▅▅▅▅▅▅▅▅
`vue-router.minimal`	51.75 KiB	0 B (0.00%)	147.54 KiB	46.50 KiB	▅▅▅▅▅▅▅▅▅▅▅
`vue-router.full`	56.55 KiB	0 B (0.00%)	163.12 KiB	50.86 KiB	▅▅▅▅▅▅▅▅▅▅▅
`react-start.minimal`	99.11 KiB	0 B (0.00%)	311.58 KiB	85.68 KiB	▅▅▅▅▅▅▅▅▅▅▅
`react-start.full`	102.50 KiB	0 B (0.00%)	321.39 KiB	88.63 KiB	▁▁▁▁▁██████
`solid-start.minimal`	48.19 KiB	0 B (0.00%)	145.13 KiB	42.67 KiB	▅▅▅▅▅▅▅▅▅▅▅
`solid-start.full`	53.68 KiB	0 B (0.00%)	161.08 KiB	47.37 KiB	▁▁▁▁▁██████

Trend sparkline is historical gzip bytes ending with this PR measurement; lower is better.

codspeed-hq · 2026-03-03T02:39:02Z

Merging this PR will not alter performance

✅ 2 untouched benchmarks

_{Comparing sleitor:fix-6801 (fe88fa6) with main (1acc8ea)}

schiller-manuel · 2026-03-27T22:07:49Z

the howtos are not ready for consumption. we might remove them or restructure completely

github-actionsBot added the documentation Everything documentation related label Mar 3, 2026

schiller-manuel closed this Mar 27, 2026

Navigation Menu

Uh oh!

Uh oh!

docs(router): add "How To" section to docs navigation sidebar - #6804

docs(router): add "How To" section to docs navigation sidebar#6804
sleitor wants to merge 1 commit into
TanStack:mainfrom
sleitor:fix-6801

sleitor commented Mar 3, 2026•
edited by coderabbitai Bot
Loading

Uh oh!

coderabbitaiBot commented Mar 3, 2026•
edited
Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

Uh oh!

nx-cloudBot commented Mar 3, 2026•
edited
Loading

Uh oh!

pkg-pr-newBot commented Mar 3, 2026

Uh oh!

github-actionsBot commented Mar 3, 2026

Uh oh!

codspeed-hqBot commented Mar 3, 2026

Uh oh!

schiller-manuel commented Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

sleitor commented Mar 3, 2026• edited by coderabbitai BotLoading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Summary by CodeRabbit

Uh oh!

coderabbitaiBot commented Mar 3, 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 labels

Poem

Uh oh!

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

Uh oh!

🤖 Nx Cloud AI Fix Eligible

Uh oh!

pkg-pr-newBot commented Mar 3, 2026

Uh oh!

github-actionsBot commented Mar 3, 2026

Bundle Size Benchmarks

Uh oh!

codspeed-hqBot commented Mar 3, 2026

Merging this PR will not alter performance

Uh oh!

schiller-manuel commented Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sleitor commented Mar 3, 2026•
edited by coderabbitai Bot
Loading

coderabbitaiBot commented Mar 3, 2026•
edited
Loading

nx-cloudBot commented Mar 3, 2026•
edited
Loading