---
title: "Set up React Router v7 with no data router | Grafana Cloud documentation"
description: "Get started with Frontend Observability with React Router v7 with no 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 no data router

Follow these steps to get started quickly with the Faro-React Web SDK for React Router v7 with no 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
```

## Instrument your application

### React Router v7

In the file you define your router, import `createRoutesFromChildren`, `matchRoutes`, `Routes`, `useLocation`, `useNavigationType` from `react-router-dom` and pass them to the dependencies object.

The final result should look similar like this example.

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

```ts
import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType } from 'react-router-dom';

import {
  createReactRouterV7Options,
  getWebInstrumentations,
  initializeFaro,
  ReactIntegration,
  ReactRouterVersion,
} from '@grafana/faro-react';

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

  // Mandatory, the identification label of your application
  app: {
    name: 'my-react-app',
  },

  // ...

  instrumentations: [
    // Load the default Web instrumentations
    ...getWebInstrumentations(),

    new ReactIntegration({
      router: createReactRouterV7Options({
        createRoutesFromChildren,
        matchRoutes,
        Routes,
        useLocation,
        useNavigationType,
      }),
    }),
  ],
});
```

To instrument React Router v7 import the `<FaroRoutes/>` component and use it instead of the React router `<Routes />` component, for example:

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

```tsx
import { FaroRoutes } from '@grafana/faro-react';

// during render
<FaroRoutes>
  <Route path="/" element={<Home />} />
  {/* ... */}
</FaroRoutes>;
```

## 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.