# Install on React Router

> Add MetricRaven to a React Router v7 app in framework mode (server or SPA) or library mode.

Source: https://metricraven.com/docs/install-react-router  
Markdown: https://metricraven.com/docs/install-react-router.md  
Section: Installation guides

In framework mode, the tag goes in the `Layout` export of `app/root.tsx`. That works with server rendering, prerendering and SPA mode (`ssr: false`).

## Framework mode

1. **Copy your snippet**

   In MetricRaven, open your site's **Settings → Install** card and copy the script tag. It already contains your site ID.

2. **Add the script to the Layout head**

   Replace `YOUR_SITE_ID` with the public site ID from your site's **Settings → Install** card. The site ID is public and safe in browser code; never put your secret key in a page.

   ```typescript title="app/root.tsx"
   // app/root.tsx
   import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";

   export function Layout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en">
         <head>
           <meta charSet="utf-8" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <Meta />
           <Links />
           <script
             defer
             src="https://metricraven.com/js/script.js"
             data-site-id="YOUR_SITE_ID"
           />
         </head>
         <body>
           {children}
           <ScrollRestoration />
           <Scripts />
         </body>
       </html>
     );
   }

   export default function App() {
     return <Outlet />;
   }
   ```

   Keep your existing `Layout` and add only the `<script>` element. In SPA mode the `Layout` is rendered into `index.html` at build time, so the tag ships in the static file.

3. **Build, deploy and open your app**

   `react-router dev` runs on `localhost`, which is not tracked by default; check the deployed app.

## Library (declarative or data) mode

If you create the router yourself with `createBrowserRouter` or `<BrowserRouter>` in a Vite app, put the tag in `index.html` as in the [React (Vite)](https://metricraven.com/docs/install-react) guide.

> **Verify it works**
>
> Open your live website in a normal browser window (not an automated or embedded one). In the browser's Network panel, look for `script.js` and then a request to `/api/v1/collect` whose response contains `ok: true`. Open your site's **Traffic** tab and choose **Refresh**; the selected dates must include your visit.
>
> Nothing showing? See [Troubleshooting](https://metricraven.com/docs/troubleshooting).

## Notes

- `<Link>` navigation uses the history API, which the tracker records. You don't need a route-change listener.
- Click between a few pages and check the Network panel shows one `/api/v1/collect` pageview per navigation. Two per click means the tag is loaded twice.
- Track events from components with `window.analytics.track()`; see [Goals & funnels](https://metricraven.com/docs/goals-funnels).
- If you upgraded from Remix, `app/root.tsx` is the same file you used there.

Optional script attributes are listed in [Install & verify](https://metricraven.com/docs/install). To exclude your own visits, see [Exclude your visits](https://metricraven.com/docs/exclude-visits).