---
title: "Set up React Router v7 with a data router | Grafana Cloud documentation"
description: "Get started with Frontend Observability with React Router v7 with a data router."
---

> For a curated documentation index, see [llms.txt](/llms.txt). For the complete documentation index, see [llms-full.txt](/llms-full.txt).

# Set up React Router v7 with a data router

Follow these steps to get started quickly with the Faro-React Web SDK for React Router v7 with a data router.

1. Install the Faro-React Web SDK
2. Instrument your application

## Install the Faro-React Web SDK

First add Faro-React to your project. Install the Faro-React package by running the following command for NPM:

sh ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```sh
# install globally
npm i @grafana/faro-react
```

Or the following command Yarn:

sh ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```sh
yarn add @grafana/faro-react
```

The Faro-React package offers all the functionality and behavior from the Faro Web SDK package plus additional React specific functionality like router instrumentation, a custom ErrorBoundary, and more.

Add the following code snippet to your project to import Faro-React with the minimum setup needed to get insights into the health and performance of your application or website:

ts ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```ts
import { initializeFaro } from '@grafana/faro-react';

initializeFaro({
  // required: the URL of the Grafana collector
  url: 'my/collector/url',

  // required: the identification label of your application
  app: {
    name: 'my-react-app',
  },
});
```

Faro-React captures data about your application’s health and performance and exports them to the Grafana Cloud faro receiver.

Open source users can use the Grafana Alloy as their data collector, to learn more consult the [Faro receiver with Grafana Alloy documentation](/docs/alloy/latest/reference/components/faro.receiver/).

## Instrument your application

Next, instrument the routes from a React data router (BrowserRouter, HashRouter, or MemoryRouter).

In the file you create your data router, often the `App.\*` file pass your data router to the Faro-React function `withFaroRouterInstrumentation` to wrap all your routes with Faro instrumentation:

Configure the router instrumentation:

ts ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```ts
import {
  initializeFaro,
  createReactRouterV7DataOptions,
  ReactIntegration,
  getWebInstrumentations,
} from '@grafana/faro-react';

import { matchRoutes } from 'react-router-dom';

initializeFaro({
  // required: the URL of the Grafana collector
  url: 'my/collector/url',

  // required: the identification label of your application
  app: {
    name: 'my-react-app',
  },
  instrumentations: [
    // Load the default Web instrumentations
    ...getWebInstrumentations(),

    new ReactIntegration({
      router: createReactRouterV7DataOptions({
        matchRoutes,
      }),
    }),
  ],
});
```

Instrument the router:

ts ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```ts
import { createBrowserRouter } from 'react-router-dom';

const reactBrowserRouter = createBrowserRouter([
  // your routes...
]);

const browserRouter = withFaroRouterInstrumentation(reactBrowserRouter);
```

## Next

Refer to the [JavaScript quickstart documentation](/docs/grafana-cloud/monitor-applications/frontend-observability/quickstart/javascript/) for instructions on how to create and send data to a Grafana Cloud Frontend Application.