> ## Documentation Index
> Fetch the complete documentation index at: https://help.trfyx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Router

> Install Trfyx in a React Router application.

# Install Trfyx in React Router

Add the Trfyx tracker once at the application's root so it is available across routes.

## Add the tracker

Open your root component, commonly `App.jsx`, `App.tsx`, or your application entry point, and load the Trfyx tracker once.

```tsx theme={null}
import { useEffect } from "react"

export default function App() {
  useEffect(() => {
    const script = document.createElement("script")
    script.defer = true
    script.src = "https://app.trfyx.com/script.js"
    script.setAttribute("data-website-id", "YOUR_TRFYX_PROJECT_ID")
    script.setAttribute("data-domain", "yourdomain.com")
    document.head.appendChild(script)

    return () => script.remove()
  }, [])

  return <YourApp />
}
```

<Warning>
  Replace `YOUR_TRFYX_PROJECT_ID` with the Website ID from your Trfyx project and `yourdomain.com` with the domain you want to track. Keep the script URL as `https://app.trfyx.com/script.js`.
</Warning>

<Tip>
  Add the tracker once at the application root. Do not add it inside individual route components, or you may collect duplicate pageviews.
</Tip>

## Verify route tracking

Deploy the app, visit the live site, and navigate through several React Router routes. Confirm that Trfyx receives the expected activity.

Do not mount the tracker separately inside every route component. That can create duplicate scripts and duplicate collection.


## Related topics

- [Next.js](/nextjs-app-router.md)
- [Vercel v0](/vercel-v0.md)
- [Lovable](/lovable.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.