Menu
DocumentationGrafana CloudMonitor applicationsFrontend ObservabilityInstrumentReactUpgrade 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
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.
Was this page helpful?
Related documentation
Related resources from Grafana Labs
Additional helpful documentation, links, and articles:
Video
Getting started with the Grafana LGTM Stack
In this webinar, we’ll demo how to get started using the LGTM Stack: Loki for logs, Grafana for visualization, Tempo for traces, and Mimir for metrics.
Video
Intro to Kubernetes monitoring in Grafana Cloud
In this webinar you’ll learn how Grafana offers developers and SREs a simple and quick-to-value solution for monitoring their Kubernetes infrastructure.
Video
Building advanced Grafana dashboards
In this webinar, we’ll demo how to build and format Grafana dashboards.