integration-react-tanstack-router-code-based

Integrate Amplitude analytics into React apps using TanStack Router code-based routes.

28|Updated Dec 5, 2025
One-click install
npx skills add https://github.com/amplitude/wizard --skill integration-react-tanstack-router-code-based-amplitude
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integration-react-tanstack-router-code-based
Source: https://github.com/amplitude/wizard/tree/main/skills/integration/integration-react-tanstack-router-code-based
Command: npx skills add https://github.com/amplitude/wizard --skill integration-react-tanstack-router-code-based-amplitude

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This integration helps developers add Amplitude analytics to React applications using TanStack Router with code-based routing, enabling actionable product analytics without heavy boilerplate.

Core Features & Use Cases

  • Initialize Amplitude via the Unified SDK in code-based routing setups.
  • Enforce Name conventions for events and safe property naming to keep data clean.
  • Support user identification on login and sign-up flows to correlate events across client and server when applicable.
  • Track navigations and user actions within TanStack Router-driven apps, following end-to-end instrumentation patterns.

Quick Start

Install the Amplitude Unified SDK, initialize with initAll in your app entry (e.g., main.tsx), then add track and identify calls in your route handlers and components.

Frequently Asked Questions about integration-react-tanstack-router-code-based

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate Amplitude analytics into a React app using TanStack Router?

To integrate Amplitude analytics, initialize the Unified SDK with initAll in your app entry point, then place track and identify calls directly inside your TanStack Router code-based route handlers to capture navigations and user actions.

What's the best way to track user logins and sign-ups with Amplitude in TanStack Router?

The best way to track user logins is to call Amplitude's identify method within your TanStack Router code-based route handlers to correlate user events across client and server, ensuring user identification on login and sign-up flows.

Does this Amplitude integration support code-based routing or file-based routing in TanStack Router?

This Amplitude integration supports projects employing TanStack Router's code-based routing. You must initialize Amplitude via the Unified SDK and structure track and identify calls within the code-based route handlers.

What event naming conventions should I use for Amplitude event tracking in React?

For Amplitude event tracking, you should use Title Case for event names and snake_case for event properties. Enforcing these naming conventions keeps your analytics data clean and structured for actionable product insights.

Can I use Amplitude autocapture with TanStack Router in React?

Yes, you can use Amplitude autocapture where applicable. After initializing the Unified SDK via initAll in your React app entry, autocapture works alongside manual track and identify calls placed in your TanStack Router handlers.

Why do I need to initialize Amplitude with initAll before setting up route tracking?

You need to initialize Amplitude with initAll in your app entry point like main.tsx because it sets up the Unified SDK environment required before you can place track and identify calls in your TanStack Router route handlers.