# PostHog react-react-router-6 Example Project Repository: https://github.com/PostHog/context-mill Path: basics/react-react-router-6 --- ## README.md # PostHog React Router 6 example This is a [React Router 6](https://reactrouter.com) example demonstrating PostHog integration with product analytics, session replay, feature flags, and error tracking. ## Features - **Product Analytics**: Track user events and behaviors - **Session Replay**: Record and replay user sessions - **Error Tracking**: Capture and track errors - **User Authentication**: Demo login system with PostHog user identification - **Client-side Tracking**: Examples of client-side tracking methods ## Getting Started ### 1. Install Dependencies ```bash npm install # or pnpm install ``` ### 2. Configure Environment Variables Create a `.env` file in the root directory: ```bash VITE_PUBLIC_POSTHOG_PROJECT_TOKEN=your_posthog_project_token VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com ``` Get your PostHog project token from your [PostHog project settings](https://app.posthog.com/project/settings). ### 3. Run the Development Server ```bash npm run dev # or pnpm dev ``` Open [http://localhost:5173](http://localhost:5173) with your browser to see the app. ## Project Structure ``` src/ ├── components/ │ └── Header.jsx # Navigation header with auth state ├── contexts/ │ └── AuthContext.jsx # Authentication context with PostHog integration ├── routes/ │ ├── Root.jsx # Root route component │ ├── Home.jsx # Home/Login page │ ├── Burrito.jsx # Demo feature page with event tracking │ └── Profile.jsx # User profile with error tracking demo ├── main.jsx # App entry point with PostHog initialization └── globals.css # Global styles ``` ## Key Integration Points ### Client-side initialization (main.jsx) ```javascript import posthog from "posthog-js" import { PostHogProvider } from "@posthog/react" posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_PROJECT_TOKEN, { api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST, defaults: '2026-01-30', }); ``` ### User identification (AuthContext.jsx) The user is identified when the user logs in on the **client-side**. ```javascript posthog.identify(username); posthog.capture('user_logged_in'); ``` The session and distinct ID can be passed to the backend by including the `X-POSTHOG-SESSION-ID` and `X-POSTHOG-DISTINCT-ID` headers. You should use these headers in the backend to identify events. **Important**: do not identify users on the server-side. ### Event tracking (Burrito.jsx) ```javascript posthog?.capture('burrito_considered', { total_considerations: updatedUser.burritoConsiderations, username: user.username, }); ``` ### Error tracking **Note**: The app can be wrapped with `PostHogErrorBoundary` from `@posthog/react` (imported in `main.jsx`) to automatically capture unhandled React errors. Manual error capture can be added to components using `posthog?.captureException(err)`. ## Learn More - [PostHog Documentation](https://posthog.com/docs) - [React Router 6 Documentation](https://reactrouter.com/en/6.28.0) - [PostHog React Integration Guide](https://posthog.com/docs/libraries/react) --- ## .env.example ```example VITE_PUBLIC_POSTHOG_PROJECT_TOKEN= VITE_PUBLIC_POSTHOG_HOST= PROJECT_ID= ``` --- ## index.html ```html react-react-router-6
``` --- ## src/components/Header.jsx ```jsx import { Link } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext'; import { usePostHog } from '@posthog/react'; export default function Header() { const { user, logout } = useAuth(); const posthog = usePostHog(); const handleLogout = () => { if (user) { posthog.capture('user_logged_out', { username: user.username, distinct_id: user.username, }); } logout(); }; return (
{user ? ( <> Welcome, {user.username}! ) : ( Not logged in )}
); } ``` --- ## src/contexts/AuthContext.jsx ```jsx import { createContext, useContext, useState } from 'react'; const AuthContext = createContext(undefined); const users = new Map(); export function AuthProvider({ children }) { const [user, setUser] = useState(() => { if (typeof window === 'undefined') return null; const storedUsername = localStorage.getItem('currentUser'); if (storedUsername) { const existingUser = users.get(storedUsername); if (existingUser) { return existingUser; } } return null; }); const login = async (username, password) => { if (!username || !password) { return false; } let localUser = users.get(username); if (!localUser) { localUser = { username, burritoConsiderations: 0 }; users.set(username, localUser); } setUser(localUser); localStorage.setItem('currentUser', username); return true; }; const logout = () => { setUser(null); localStorage.removeItem('currentUser'); }; const setUserState = (newUser) => { setUser(newUser); users.set(newUser.username, newUser); }; return ( {children} ); } export function useAuth() { const context = useContext(AuthContext); if (context === undefined) { throw new Error('useAuth must be used within an AuthProvider'); } return context; } ``` --- ## src/main.jsx ```jsx import './globals.css' import { StrictMode } from "react"; import ReactDOM from "react-dom/client"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Root from './routes/Root'; import Home from './routes/Home'; import Burrito from './routes/Burrito'; import Profile from './routes/Profile'; import posthog from 'posthog-js'; import { PostHogErrorBoundary, PostHogProvider } from '@posthog/react' // Initialize PostHog posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_PROJECT_TOKEN, { api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST, defaults: '2026-01-30', }); const root = document.getElementById("root"); if (!root) throw new Error("Root element not found"); ReactDOM.createRoot(root).render( }> } /> } /> } /> , ); ``` --- ## src/routes/Burrito.jsx ```jsx import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext'; import { usePostHog } from '@posthog/react'; export default function BurritoPage() { const { user, setUser } = useAuth(); const navigate = useNavigate(); const [hasConsidered, setHasConsidered] = useState(false); const posthog = usePostHog() useEffect(() => { if (!user) { navigate('/'); } }, [user, navigate]); if (!user) { return null; } const handleConsideration = () => { const updatedUser = { ...user, burritoConsiderations: user.burritoConsiderations + 1 }; setUser(updatedUser); setHasConsidered(true); setTimeout(() => setHasConsidered(false), 2000); posthog.capture('burrito_considered', { total_considerations: updatedUser.burritoConsiderations, username: user.username, distinct_id: user.username, }); }; return (

Burrito consideration zone

Take a moment to truly consider the potential of burritos.

{hasConsidered && (

Thank you for your consideration! Count: {user.burritoConsiderations}

)}

Consideration stats

Total considerations: {user.burritoConsiderations}

); } ``` --- ## src/routes/Home.jsx ```jsx import { useState } from 'react'; import { useAuth } from '../contexts/AuthContext'; import { usePostHog } from '@posthog/react'; export default function Home() { const { user, login } = useAuth(); const posthog = usePostHog(); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const handleSubmit = async (e) => { e.preventDefault(); setError(''); const success = await login(username, password); if (success) { posthog.capture('user_logged_in', { username: username, distinct_id: username, }); setUsername(''); setPassword(''); } else { setError('Please provide both username and password'); } }; if (user) { return (

Welcome back, {user.username}!

You are now logged in. Feel free to explore:

); } return (

Welcome to Burrito Consideration App

Please sign in to begin your burrito journey

setUsername(e.target.value)} placeholder="Enter any username" />
setPassword(e.target.value)} placeholder="Enter any password" />
{error &&

{error}

}

Note: This is a demo app. Use any username and password to sign in.

); } ``` --- ## src/routes/Profile.jsx ```jsx import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext'; export default function ProfilePage() { const { user } = useAuth(); const navigate = useNavigate(); useEffect(() => { if (!user) { navigate('/'); } }, [user, navigate]); if (!user) { return null; } return (

User Profile

Your Information

Username: {user.username}

Burrito Considerations: {user.burritoConsiderations}

Your Burrito Journey

{user.burritoConsiderations === 0 ? (

You haven't considered any burritos yet. Visit the Burrito Consideration page to start!

) : user.burritoConsiderations === 1 ? (

You've considered the burrito potential once. Keep going!

) : user.burritoConsiderations < 5 ? (

You're getting the hang of burrito consideration!

) : user.burritoConsiderations < 10 ? (

You're becoming a burrito consideration expert!

) : (

You are a true burrito consideration master! 🌯

)}
); } ``` --- ## src/routes/Root.jsx ```jsx import { Outlet } from "react-router-dom"; import Header from "../components/Header"; import { AuthProvider } from "../contexts/AuthContext"; export default function Root() { return (
); } ``` --- ## vite.config.js ```js import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ plugins: [react()], }) ``` ---