Documentation Grafana Cloud Monitor applications Frontend Observability Instrument React Upgrade to data router

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

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.