diff --git a/packages/react/README.md b/packages/react/README.md index 9e8e803c0..5d86a35d1 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -68,6 +68,15 @@ additional React specific functionality like router instrumentation, a custom Er ### Router v6 with Data Router ```ts +import { + initializeFaro, + createReactRouterV6DataOptions, + ReactIntegration, + getWebInstrumentations, +} from '@grafana/faro-react'; + +import { matchRoutes } from 'react-router-dom'; + initializeFaro({ // ... @@ -90,6 +99,8 @@ In the file you create your data router, often the App.\* file pass your data ro function `withFaroRouterInstrumentation` to wrap all your routes and apply Faro auto instrumentation: ```ts +import { createBrowserRouter } from '@grafana/faro-react'; + const reactBrowserRouter = createBrowserRouter([ // your routes... ]); @@ -105,7 +116,13 @@ In the file you define your router, import `createRoutesFromChildren`, `matchRou ```ts import { createRoutesFromChildren, matchRoutes, Routes, useLocation, useNavigationType } from 'react-router-dom'; -import { getWebInstrumentations, initializeFaro, ReactIntegration, ReactRouterVersion } from '@grafana/faro-react'; +import { + createReactRouterV6Options, + getWebInstrumentations, + initializeFaro, + ReactIntegration, + ReactRouterVersion, +} from '@grafana/faro-react'; initializeFaro({ // Mandatory, the URL of the Grafana collector @@ -159,7 +176,14 @@ The final result should look similar like this example: import { createBrowserHistory } from 'history'; import { Route } from 'react-router-dom'; -import { getWebInstrumentations, initializeFaro, ReactIntegration, ReactRouterVersion } from '@grafana/faro-react'; +import { + // or createReactRouterV4Options + createReactRouterV5Options, + getWebInstrumentations, + initializeFaro, + ReactIntegration, + ReactRouterVersion, +} from '@grafana/faro-react'; const history = createBrowserHistory();