Add TanStack Router Example App (1-6-vite-tanstack-router)

[Copilot]

This PR implements a new example application that demonstrates TanStack Router integration with React Query, following the same functionality as the existing 1-5-vite-reactquery-query-options app but using TanStack Router for routing instead of React Router.

What's New

Created apps/1-6-vite-tanstack-router with the following features:

• TanStack Router Integration: Programmatic routing using TanStack Router's createRouter, createRootRoute, and createRoute APIs
• Type-Safe Routing: Leverages TanStack Router's built-in TypeScript support for route parameters
• Same Functionality: Maintains identical UI/UX and data fetching patterns as the source app
• React Query Integration: Seamless integration between TanStack Router and React Query
• TanStack Router DevTools: Included for enhanced development experience

Routes Implemented

• / - Home page with posts feed
• /users - Users listing with interactive data table
• /users/$id - Individual user details with their posts
• /posts/$id - Post details with comments functionality

Key Technical Changes

1. Dependencies: Replaced react-router-dom with @tanstack/react-router and @tanstack/router-devtools
2. Routing Setup: Implemented programmatic route definitions instead of JSX-based routing
3. Component Updates: Updated all components to use TanStack Router hooks and components:
   • useParams → TanStack Router's typed params from route context
   • useNavigate → TanStack Router's navigation API
   • Link → TanStack Router's Link component with typed routes
   • useLocation → TanStack Router's useRouter hook
4. Navigation: Preserved all navigation functionality including breadcrumbs and programmatic navigation

Screenshots

Homepage with TanStack Router:

Users page with data table:

Verification

• ✅ App builds successfully (pnpm build)
• ✅ Runs on port 3316 (pnpm dev)
• ✅ All routing works correctly with type safety
• ✅ Data fetching and mutations work identically to source app
• ✅ Navigation and breadcrumbs function properly
• ✅ Maintains same UI/UX as the 1-5 example

The app demonstrates how to migrate from React Router to TanStack Router while maintaining all existing functionality and gaining additional type safety and developer experience improvements.

Fixes #2.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.