---
title: "Upgrade to React Router v6 with a data router | Grafana Cloud documentation"
description: "Upgrade to React Router v6 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).

[Documentation](/docs/)![breadcrumb arrow](/static/assets/img/icons/grafana-icon-breadcrumb-arrow-gray.svg) [Grafana Cloud](/docs/grafana-cloud/)![breadcrumb arrow](/static/assets/img/icons/grafana-icon-breadcrumb-arrow-gray.svg) [Monitor applications](/docs/grafana-cloud/monitor-applications/)![breadcrumb arrow](/static/assets/img/icons/grafana-icon-breadcrumb-arrow-gray.svg) [Frontend Observability](/docs/grafana-cloud/monitor-applications/frontend-observability/)![breadcrumb arrow](/static/assets/img/icons/grafana-icon-breadcrumb-arrow-gray.svg) [Instrument](/docs/grafana-cloud/monitor-applications/frontend-observability/instrument/)![breadcrumb arrow](/static/assets/img/icons/grafana-icon-breadcrumb-arrow-gray.svg) [React](/docs/grafana-cloud/monitor-applications/frontend-observability/instrument/faro-react/)![breadcrumb arrow](/static/assets/img/icons/grafana-icon-breadcrumb-arrow-gray.svg) Upgrade to data router

Grafana Cloud

## Upgrade to React Router v6 with a data router

This section describes how to upgrade the Faro React router instrumentation if you already have a React app instrumented which doesn’t use data routers.

In the `ReactIntegration` call, change the `version` property from `ReactRouterVersion.[V4|V5|V6]` to `ReactRouterVersion.V6_data_router`.

If you use React Router v4 or v5 remove the `history` and `Route` dependencies and add the `matchRoutes` function exported by `react-router-dom`.

If you use React Router v6 remove the following dependencies from the dependencies `object`:

- `createRoutesFromChildren`
- `Routes`
- `useLocation`
- `useNavigationType`

The `ReactIntegration` call should look similar to:

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

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

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

initializeFaro({
  // ...

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

    new ReactIntegration({
      router: {
        version: ReactRouterVersion.V6_data_router,
        dependencies: {
          matchRoutes,
        },
      },
    }),
  ],
});
```

Next you need to remove the Faro route components `<FaroRoute/>` or `<FaroRoutes/>` and [instrument the data router](/docs/grafana-cloud/monitor-applications/frontend-observability/quickstart/react/#instrument-your-application).