tanstack-router

Provides TanStack Router patterns — file-based routes, typed params/search, layouts, loaders. Use when setting up routes, implementing navigation, or configuring route loaders.

Zur Installation springen

Repository: MadAppGang/magus
Letzte Quellaktivität: 29. Juli 2026 um 14:55
Erkannte Sprache von SKILL.md: Englisch
Sterne: 7
Forks: 4

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/MadAppGang/magus --skill tanstack-router

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

agent-model

Picks the browser-use agent brain LLM per task. Use when choosing a model for retry_with_browser_use_agent or a cloud session, or the user mentions a cheap, slow, or smart model.

2026-08-09

core-api

Reference for the Browser Use MCP tools — parameters, returns, session lifecycle. Use when navigating, clicking, typing, evaluating JS, or extracting page content.

2026-08-09

debug-ui

Visual UI debugging — screenshot capture and analysis, responsive layout checking at multiple viewport sizes, CSS validation via DOM state, visual regression detection, before/after state comparison.

2026-08-09

Alle aus diesem Repository ansehen

// vite.config.ts
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react(),
    TanStackRouterVite({
      autoCodeSplitting: true, // NEW: Enable automatic splitting
    }),
  ],
})

// src/main.tsx
import { StrictMode } from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

const router = createRouter({ routeTree })

// Register router for type safety
declare module '@tanstack/react-router' {
  interface Register {
    router: typeof router
  }
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
)

src/routes/
├── __root.tsx                 # Root layout (Outlet, providers)
├── index.tsx                  # "/" route
├── about.tsx                  # "/about" route
├── users/
│   ├── index.tsx              # "/users" route
│   └── $userId.tsx            # "/users/:userId" route (dynamic)
└── posts/
    ├── $postId/
    │   ├── index.tsx          # "/posts/:postId" route
    │   └── edit.tsx           # "/posts/:postId/edit" route
    └── index.tsx              # "/posts" route

src/routes/
├── __root.tsx           # Root layout
├── index.tsx            # "/" (physical file)
├── about.lazy.tsx       # "/about" (virtual route, lazy only)
└── users/
    ├── index.tsx        # "/users" (physical)
    └── $userId.lazy.tsx # "/users/:userId" (virtual, lazy only)

// src/routes/about.lazy.tsx
// No about.tsx needed! Router creates virtual anchor
import { createLazyFileRoute } from '@tanstack/react-router'

export const Route = createLazyFileRoute('/about')({
  component: () => <div>About Us</div>,
})

// src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: () => (
    <>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users">Users</Link>
      </nav>

      <main>
        <Outlet /> {/* Child routes render here */}
      </main>

      <TanStackRouterDevtools /> {/* Auto-hides in production */}
    </>
  ),
})

// src/routes/about.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/about')({
  component: AboutComponent,
})

function AboutComponent() {
  return <div>About Page</div>
}

// src/routes/users/$userId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/users/$userId')({
  component: UserComponent,
})

function UserComponent() {
  const { userId } = Route.useParams() // Fully typed!

  return <div>User ID: {userId}</div>
}

// src/routes/users/index.tsx
import { createFileRoute } from '@tanstack/react-router'
import { z } from 'zod'

const userSearchSchema = z.object({
  page: z.number().default(1),
  filter: z.enum(['active', 'inactive', 'all']).default('all'),
  search: z.string().optional(),
})

export const Route = createFileRoute('/users/')({
  validateSearch: userSearchSchema,
  component: UsersComponent,
})

function UsersComponent() {
  const { page, filter, search } = Route.useSearch() // Fully typed!

  return (
    <div>
      <p>Page: {page}</p>
      <p>Filter: {filter}</p>
      {search && <p>Search: {search}</p>}
    </div>
  )
}

import { Link } from '@tanstack/react-router'

// Basic navigation
<Link to="/about">About</Link>

// With params
<Link to="/users/$userId" params={{ userId: '123' }}>
  View User
</Link>

// With search params
<Link
  to="/users"
  search={{ page: 2, filter: 'active' }}
>
  Users Page 2
</Link>

// With state
<Link to="/details" state={{ from: 'home' }}>
  Details
</Link>

// Active link styling
<Link
  to="/about"
  activeProps={{ className: 'text-blue-600 font-bold' }}
  inactiveProps={{ className: 'text-gray-600' }}
>
  About
</Link>

import { useNavigate } from '@tanstack/react-router'

function MyComponent() {
  const navigate = useNavigate()

  const handleClick = () => {
    // Navigate to route
    navigate({ to: '/users' })

    // With params
    navigate({ to: '/users/$userId', params: { userId: '123' } })

    // With search
    navigate({ to: '/users', search: { page: 2 } })

    // Replace history
    navigate({ to: '/login', replace: true })

    // Go back
    navigate({ to: '..' }) // Relative navigation
  }

  return <button onClick={handleClick}>Navigate</button>
}

// src/routes/users/$userId.tsx
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/users/$userId')({
  loader: async ({ params }) => {
    const user = await fetchUser(params.userId)
    return { user }
  },
  component: UserComponent,
})

function UserComponent() {
  const { user } = Route.useLoaderData() // Fully typed!

  return <div>{user.name}</div>
}

import { queryClient } from '@/app/queryClient'
import { userQueryOptions } from '@/features/users/queries'

export const Route = createFileRoute('/users/$userId')({
  loader: ({ params }) =>
    queryClient.ensureQueryData(userQueryOptions(params.userId)),
  component: UserComponent,
})

// src/routes/posts.tsx - Loaded immediately
import { createFileRoute } from '@tanstack/react-router'
import { postsQueryOptions } from '@/features/posts/queries'
import { queryClient } from '@/app/queryClient'

export const Route = createFileRoute('/posts')({
  // Critical: loaders, search validation, beforeLoad
  loader: () => queryClient.ensureQueryData(postsQueryOptions()),
  validateSearch: (search) => postsSearchSchema.parse(search),
})

// src/routes/posts.lazy.tsx - Code-split, loaded on navigation
import { createLazyFileRoute } from '@tanstack/react-router'
import { Posts } from '@/features/posts/components/Posts'

export const Route = createLazyFileRoute('/posts')({
  // Non-critical: component, error/pending/notFound
  component: Posts,
  pendingComponent: () => <PostsSkeleton />,
  errorComponent: ({ error }) => <PostsError error={error} />,
})

// src/features/posts/components/PostHeader.tsx
import { getRouteApi } from '@tanstack/react-router'

// Get typed route API without importing the route
const routeApi = getRouteApi('/posts/$postId')

export function PostHeader() {
  // All these are fully typed!
  const { postId } = routeApi.useParams()
  const { post } = routeApi.useLoaderData()
  const { view } = routeApi.useSearch()
  const context = routeApi.useRouteContext()

  return (
    <header>
      <h1>{post.title}</h1>
      <span>Viewing: {view}</span>
    </header>
  )
}

// src/routes/_layout.tsx
import { createFileRoute, Outlet } from '@tanstack/react-router'

export const Route = createFileRoute('/_layout')({
  component: LayoutComponent,
})

function LayoutComponent() {
  return (
    <div className="dashboard-layout">
      <Sidebar />
      <div className="content">
        <Outlet /> {/* Child routes */}
      </div>
    </div>
  )
}

// Child routes
// src/routes/_layout/dashboard.tsx → "/dashboard"
// src/routes/_layout/settings.tsx → "/settings"

src/routes/
├── (auth)/                    # Group (not in URL)
│   ├── login.tsx              # "/login"
│   ├── register.tsx           # "/register"
│   └── forgot-password.tsx    # "/forgot-password"
├── (dashboard)/               # Group (not in URL)
│   ├── _layout.tsx            # Shared dashboard layout
│   ├── index.tsx              # "/" (or "/dashboard")
│   ├── analytics.tsx          # "/analytics"
│   └── settings.tsx           # "/settings"
└── __root.tsx

// src/routes/(auth)/_layout.tsx
export const Route = createFileRoute('/(auth)/_layout')({
  component: () => (
    <div className="auth-layout">
      <Logo />
      <Outlet />
    </div>
  ),
})

export const Route = createFileRoute('/users')({
  loader: async () => {
    const users = await fetchUsers()
    return { users }
  },
  pendingComponent: () => <Spinner />,
  errorComponent: ({ error }) => <ErrorMessage>{error.message}</ErrorMessage>,
  component: UsersComponent,
})

import { ErrorComponent } from '@tanstack/react-router'

export const Route = createFileRoute('/users')({
  loader: async () => {
    const users = await fetchUsers()
    if (!users) throw new Error('Failed to load users')
    return { users }
  },
  errorComponent: ({ error, reset }) => (
    <div>
      <h1>Error loading users</h1>
      <p>{error.message}</p>
      <button onClick={reset}>Try Again</button>
    </div>
  ),
  component: UsersComponent,
})

// src/routes/__root.tsx
export const Route = createRootRoute({
  beforeLoad: () => ({
    user: getCurrentUser(),
  }),
  component: RootComponent,
})

// Access in child routes
export const Route = createFileRoute('/dashboard')({
  component: function Dashboard() {
    const { user } = Route.useRouteContext()
    return <div>Welcome, {user.name}</div>
  },
})

// src/routes/_authenticated.tsx
import { createFileRoute, redirect } from '@tanstack/react-router'

export const Route = createFileRoute('/_authenticated')({
  beforeLoad: ({ context }) => {
    if (!context.user) {
      throw redirect({ to: '/login' })
    }
  },
  component: Outlet,
})

// Protected routes
// src/routes/_authenticated/dashboard.tsx
// src/routes/_authenticated/profile.tsx

<Link
  to="/users/$userId"
  params={{ userId: '123' }}
  preload="intent" // Preload on hover
>
  View User
</Link>

import { TanStackRouterDevtools } from '@tanstack/router-devtools'

// Add to root layout
<TanStackRouterDevtools position="bottom-right" />

// src/routes/files/$.tsx - Catches all paths under /files/
export const Route = createFileRoute('/files/$')({
  component: FileViewer,
})

function FileViewer() {
  // Access splat via '_splat' key (v1.x+)
  const { _splat } = Route.useParams()
  // '/files/docs/readme.md' → _splat = 'docs/readme.md'

  return <div>File: {_splat}</div>
}

// ✅ Future-proof
const { _splat } = Route.useParams()

// ⚠️ Works in v1, deprecated in v2
const splat = Route.useParams()['*']

// src/routes/$.tsx
export const Route = createFileRoute('/$')({
  component: () => <div>404 Not Found</div>,
})

// Use search params for optional data
const searchSchema = z.object({
  optional: z.string().optional(),
})

/posts/$postId/comments/$commentId

src/routes/users/
├── $userId/
│   ├── index.tsx           # Route definition
│   ├── index.lazy.tsx      # Lazy component
│   ├── UserProfile.tsx     # Page-specific component
│   └── useUserActions.ts   # Page-specific hooks
└── index.tsx

// ✅ Recommended - Router handles loading/error
export const Route = createFileRoute('/users/$userId')({
  loader: fetchUser,
  pendingComponent: UserSkeleton,
  errorComponent: UserError,
  component: UserProfile, // Only handles happy path!
})

// ❌ Avoid - Manual loading in component
function UserProfile() {
  const { data, isLoading, error } = useUser()
  if (isLoading) return <Spinner />  // Router should handle this
  if (error) return <Error />         // Router should handle this
  return <div>{data.name}</div>
}

// List views → preload detail on hover
<Link
  to="/users/$userId"
  params={{ userId }}
  preload="intent"  // Preload on hover
>
  {user.name}
</Link>

// Critical navigation → preload on render
<Link to="/dashboard" preload="render">
  Dashboard
</Link>

const searchSchema = z.object({
  tab: z.enum(['overview', 'activity', 'settings']).default('overview'),
  page: z.number().default(1),
  sort: z.enum(['name', 'date', 'score']).optional(),
})

Critical (Always Loaded)	Non-Critical (Lazy Loaded)
Route configuration	Component
Loaders	Error component
Search params validation	Pending component
beforeLoad	Not-found component

tanstack-router

Installationsoptionen

Quelldateien prüfen

TanStack Router Patterns

Installation

Automatic Code Splitting (Recommended)

TanStack Router Patterns

Installation

Automatic Code Splitting (Recommended)

Bootstrap

File-Based Routes

Virtual File Routes

Root Layout

Basic Route

Dynamic Routes with Params

Typed Search Params

Navigation with Link

Programmatic Navigation

Route Loaders (Data Fetching)

Manual Code Splitting (`.lazy.tsx` Pattern)

Type-Safe Route Data Access (`getRouteApi`)

Layouts

Route Groups

Loading States

Error Handling

Route Context

Route Guards / Auth

Preloading

DevTools

Best Practices

Common Patterns

Production Best Practices (2026)

1. File Structure = URL Structure

2. Let Router Handle Loading States

3. Preload Strategy

4. Search Params for Everything Shareable

TanStack Start (Full-Stack Framework)

Related Skills

name	tanstack-router
description	Provides TanStack Router patterns — file-based routes, typed params/search, layouts, loaders. Use when setting up routes, implementing navigation, or configuring route loaders.
disable-model-invocation	true

tanstack-router

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

TanStack Router Patterns

Installation

Automatic Code Splitting (Recommended)

TanStack Router Patterns

Installation

Automatic Code Splitting (Recommended)

Bootstrap

File-Based Routes

Virtual File Routes

Root Layout

Basic Route

Dynamic Routes with Params

Typed Search Params

Navigation with Link

Programmatic Navigation

Route Loaders (Data Fetching)

Manual Code Splitting (.lazy.tsx Pattern)

Type-Safe Route Data Access (getRouteApi)

Layouts

Route Groups

Loading States

Error Handling

Route Context

Route Guards / Auth

Preloading

DevTools

Best Practices

Common Patterns

Production Best Practices (2026)

1. File Structure = URL Structure

2. Let Router Handle Loading States

3. Preload Strategy

4. Search Params for Everything Shareable

TanStack Start (Full-Stack Framework)

Related Skills

Manual Code Splitting (`.lazy.tsx` Pattern)

Type-Safe Route Data Access (`getRouteApi`)