integration-react-react-router-6

Instrument React Router v6 apps with PostHog analytics for navigation, login, and errors.

58|5|Updated Jan 19, 2026
One-click install
npx skills add https://github.com/PostHog/skills --skill integration-react-react-router-6
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: integration-react-react-router-6
Source: https://github.com/PostHog/skills/tree/main/skills/posthog/integration/skills/react-react-router-6
Command: npx skills add https://github.com/PostHog/skills --skill integration-react-react-router-6

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This integration enables PostHog analytics to be easily added to React Router v6 applications, allowing you to track user navigation, events, errors, and feature flag interactions across routes.

Core Features & Use Cases

  • Seamless PostHog integration in React Router v6 apps, enabling event capture on navigation, login, and errors.
  • Centralized configuration via environment variables, with a provider wrapping the app for consistent analytics.
  • Use cases include understanding route-level funnel progress, identifying drop-offs after login, and tracing errors across routes.

Quick Start

Install posthog-js and @posthog/react, configure VITE_PUBLIC_POSTHOG_* environment variables, and wrap your app with PostHogProvider to begin capturing events.

Frequently Asked Questions about integration-react-react-router-6

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

FAQPage Schema
How do I add PostHog analytics to a React Router v6 app?

Track React Router v6 navigation by wrapping your app with PostHogProvider, which automatically captures route changes and enables event tracking for user journey analysis and funnel progress monitoring.

Can I track route-level user navigation and login drop-offs with PostHog in React?

Yes, you can identify user drop-offs by capturing route changes and login events with PostHog, enabling route-level funnel analysis to understand where users exit their navigation journey.

What environment variables do I need to configure for PostHog in a React Router project?

Configure VITE_PUBLIC_POSTHOG_* environment variables to supply PostHog API keys and host URLs, avoiding hard-coded values and ensuring secure environment-based analytics setup across client and server.

Does this PostHog integration support feature flags and error tracing across React routes?

Yes, the instrumentation captures feature flag interactions and error events across routes in real time, applying PostHog best practices for identify, capture, and reset to trace client-side issues.