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:

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

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

  // ...

  instrumentations: [
    // Load the default Web instrumentations

    new ReactIntegration({
      router: {
        version: ReactRouterVersion.V6_data_router,
        dependencies: {

Next you need to remove the Faro route components <FaroRoute/> or <FaroRoutes/> and instrument the data router.