integration-react-tanstack-router-code-based

Integrate PostHog analytics into code-based TanStack Router React apps with event tracking and user identification.

58|5|Updated Jan 19, 2026
One-click install
npx skills add https://github.com/PostHog/skills --skill integration-react-tanstack-router-code-based
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/PostHog/skills/tree/main/skills/posthog/integration/skills/react-tanstack-router-code-based
Command: npx skills add https://github.com/PostHog/skills --skill integration-react-tanstack-router-code-based

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Enables PostHog analytics integration for React apps using TanStack Router in a code-based routing setup, ensuring consistent event tracking across navigations and routes.

Core Features & Use Cases

  • Code-based routing integration: Implement PostHog within a TanStack Router code-defined app to centralize analytics.
  • Environment-driven config: Use environment variables for project tokens, hosts, and feature flags to keep credentials secure.
  • Event capture guidelines: Provides patterns for identifying users, tracking page/actions, and error reporting across routes.

Quick Start

Follow the workflow steps to integrate PostHog analytics into a TanStack Router code-based React app.

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 PostHog analytics into a React application using TanStack Router?

To integrate PostHog analytics into a React app using TanStack Router, you need to wrap your application in a PostHogProvider at the root level and use environment variables to securely manage your project tokens and hosts.

Does PostHog work with code-based routing setups in TanStack Router?

Yes, PostHog works specifically with code-based routing setups in TanStack Router, enabling consistent event tracking across navigations and routes by centralizing your analytics implementation within your code-defined app structure.

How do I track page views and user events in a TanStack Router code-based app?

You can track page views and user events in a TanStack Router code-based app by following the provided event capture guidelines, which include patterns for identifying users, tracking page actions, and error reporting across routes.

Do I need environment variables to set up PostHog event tracking in React?

Yes, you need environment variables to set up PostHog event tracking in React to keep your credentials secure, specifically configuring project tokens, hosts, and feature flags before initializing the analytics provider.

What is the best way to identify users in a React TanStack Router code-based routing setup?

The best way to identify users in a React TanStack Router code-based setup is to utilize the PostHogProvider and apply the specific event capture guidelines provided, ensuring accurate user identification across all route navigations.