integration-react-react-router-7-declarative

Name: integration-react-react-router-7-declarative
Availability: InStock
Author: Amplitude

Integrate Amplitude analytics into React Router v7 Declarative apps with the Unified Browser SDK.

28|Updated Dec 5, 2025

Search Tags:#analytics #integration #declarative #react-router #event-tracking #amplitude #autocapture

Ready to run

npx skills add https://github.com/amplitude/wizard --skill integration-react-react-router-7-declarative-amplitude

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: integration-react-react-router-7-declarative
Source: https://github.com/amplitude/wizard/tree/main/skills/integration/integration-react-react-router-7-declarative
Command: npx skills add https://github.com/amplitude/wizard --skill integration-react-react-router-7-declarative-amplitude

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill enables seamless Amplitude analytics integration for React Router v7 Declarative mode applications, providing a guided path to instrument events, autocapture, and user identification without disrupting existing code.

Core Features & Use Cases

Unified SDK initialization and configuration for React SPA projects using React Router v7 Declarative.
Consistent event naming (Title Case) and sensible property naming (snake_case) to support reliable analytics data.
Identify users on login and tie subsequent events with setUserId() and identify() calls; supports automatic event capture via autocapture and navigation flows.
Quick-start workflow includes a step-by-step sequence to begin instrumentation using the provided reference files.

Quick Start

Follow the workflow steps to integrate Amplitude into your React Router v7 Declarative project.

Frequently Asked Questions about integration-react-react-router-7-declarative

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

FAQPage Schema

How do I integrate Amplitude analytics into a React Router v7 Declarative mode app?▼

To integrate Amplitude analytics in React Router v7 Declarative mode, initialize the Unified Browser SDK using initAll, then wire up event tracking, autocapture, and user identification for your SPA navigation and login flows.

What is the correct event naming convention for Amplitude event tracking in React?▼

The correct convention for Amplitude event tracking is to use Title Case for event names and snake_case for event properties, ensuring reliable and consistent analytics data across your React application.

How do I tie Amplitude events to specific users after login in a React SPA?▼

To tie Amplitude events to specific users after login, call setUserId to assign the user ID and use identify to attach user properties, linking all subsequent tracked navigation and feature events to that user.

Does the Amplitude Unified Browser SDK support automatic event capture for React Router navigation?▼

Yes, the Amplitude Unified Browser SDK supports automatic event capture via autocapture, allowing you to automatically instrument navigation flows and user interactions within your React Router v7 application.

Do I need to use the initAll function to configure Amplitude in a React Router v7 project?▼

Yes, you need to use the initAll function from the Unified Browser SDK to configure and initialize Amplitude analytics, which sets up the foundation for emitting events and identifying users in your project.

Can I instrument error flows and feature usage with Amplitude in React Router v7 Declarative mode?▼

Yes, you can instrument error flows and feature usage with Amplitude in React Router v7 Declarative mode by emitting events with proper naming conventions alongside the SDK's autocapture capabilities for comprehensive tracking.