> For the complete documentation index, see [llms.txt](https://docs.uxwizz.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.uxwizz.com/installation/adding-the-tracking-code/add-tracker-to-react-router-app.md).

# Add tracker to React Router App

## 1. Include the UXWizz tracking snippet in your index.html file

Copy the current tracking snippet for your domain from UXWizz into the application's HTML entry page. Load it once. See [Adding the tracking code](/installation/adding-the-tracking-code.md).

## 2. Track pageviews

The tracker records the initial page when it loads. For client-side navigation, render this component inside your React Router. It tracks pathname, query-string, and hash changes after rendering, while avoiding a duplicate initial pageview.

```tsx
import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router-dom';

type TrackerWindow = Window & { UST?: { trackNewPage?: () => void } };

export default function UXWizzPageview() {
  const location = useLocation();
  const page = location.pathname + location.search + location.hash;
  const lastPage = useRef(page);

  useEffect(() => {
    if (page === lastPage.current) return;
    lastPage.current = page;
    (window as TrackerWindow).UST?.trackNewPage?.();
  }, [page]);

  return null;
}
```

For JavaScript, remove the type declaration and replace `(window as TrackerWindow)` with `window`.

Include the component once, inside your existing router:

```tsx
import { BrowserRouter } from 'react-router-dom';
import UXWizzPageview from './UXWizzPageview';

export default function App() {
  return (
    <BrowserRouter>
      <UXWizzPageview />
      {/* Your routes and page content */}
    </BrowserRouter>
  );
}
```

If your app already has a router, add only `UXWizzPageview` inside it. Do not add a second router.

Use only one route-tracking method; remove a separate history listener if you use this component. For content loaded after navigation, call the pageview function when the new content is ready. Navigation before the tracker loads cannot be recovered by this component.

Open a test session, navigate through two routes and back, then check **Visitors**. Confirm that each intended navigation appears once and that full recordings show the correct page content.