Cperuffo3 Efis Checklist Editor Tanstack Router

TanStack Router Skill

File-based, type-safe routing for the EFIS Checklist Editor Electron app. Uses memory history (not browser history) since Electron has no URL bar. Routes auto-generate a typed route tree via a Vite plugin — never edit src/routeTree.gen.ts manually.

Quick Start

Creating a New Route

Create a file in src/routes/. The filename determines the URL path:

// src/routes/editor.tsx
import { createFileRoute } from "@tanstack/react-router";

function EditorPage() {
  return <div className="flex h-full">Editor content</div>;
}

export const Route = createFileRoute("/editor")({
  component: EditorPage,
});

The route tree regenerates automatically. No manual registration needed.

Programmatic Navigation

import { useNavigate } from "@tanstack/react-router";

function MyComponent() {
  const navigate = useNavigate();
  return <button => navigate({ to: "/editor" })}>Open Editor</button>;
}

Declarative Navigation

import { Link } from "@tanstack/react-router";

<Link to="/editor">Open Editor</Link>

Key Concepts

Common Patterns

Route with Custom Layout

Routes can use their own layout instead of the root BaseLayout:

// src/routes/editor.tsx
import { createFileRoute } from "@tanstack/react-router";
import EditorLayout from "@/layouts/editor-layout";

function EditorPage() {
  return <EditorLayout />;
}

export const Route = createFileRoute("/editor")({
  component: EditorPage,
});

Route File Naming

WARNING: Common Anti-Patterns

NEVER use browser history in Electron

// BAD — breaks in Electron
import { createBrowserHistory } from "@tanstack/react-router";
const router = createRouter({ history: createBrowserHistory() });

// GOOD — memory history for Electron
import { createMemoryHistory } from "@tanstack/react-router";
const router = createRouter({
  history: createMemoryHistory({ initialEntries: ["/"] }),
});

NEVER edit routeTree.gen.ts

This file is regenerated on every build. Changes are overwritten silently.

See Also

• patterns — Route patterns, layouts, navigation
• workflows — Adding routes, debugging, route guards

Related Skills

• See the react skill for component patterns used in route pages
• See the typescript skill for type safety patterns with route params
• See the vite skill for the TanStack Router Vite plugin configuration
• See the electron skill for why memory history is required

Documentation Resources

Fetch latest TanStack Router documentation with Context7.

How to use Context7:

1. Use mcp__context7__resolve-library-id to search for "tanstack-router"
2. Query with mcp__context7__query-docs using the resolved library ID

Library ID: /tanstack/router (benchmark score 94.5, 3,146 snippets) Alternative: /websites/tanstack_router (website docs, 2,334 snippets)

Recommended Queries:

• "file-based routing setup with createFileRoute"
• "createMemoryHistory for non-browser environments"
• "route layout nesting with Outlet"
• "type-safe navigation with useNavigate"

Converted and distributed by TomeVault — claim your Tome and manage your conversions.