@@ -20,16 +20,53 @@ npm install @elastic/apm-rum-react --save
2020The React integration package provides two approaches to instrumenting your application:
2121
2222[float]
23- ===== Instrumenting application routes
23+ ===== Instrumenting application routes with @elastic/apm-rum-react >= 2.0.0
24+
25+ To instrument the application routes, you can use `ApmRoutes` component provided in the package.
26+ `ApmRoutes` creates a transaction that has the path of the `Route` as its name and has `route-change`
27+ as its type.
28+
29+ NOTE: `ApmRoutes` only supports applications using version `6` of the
30+ https://github.com/remix-run/react-router[`react-router`] library.
31+
32+ NOTE: `RouterProvider` instrumentation is not currently supported.
33+
34+ First import `ApmRoutes` from the `@elastic/apm-rum-react` package:
35+
36+ [source,js]
37+ ----
38+ import { ApmRoutes } from '@elastic/apm-rum-react'
39+ ----
40+
41+ Then, use the `ApmRoutes` component from the `react-router` library. Every `<Route>` wrapped by `<ApmRoutes>` will be monitored.
42+
43+ [source,js]
44+ ----
45+ class App extends React.Component {
46+ render() {
47+ return (
48+ <BrowserRouter>
49+ <ApmRoutes>
50+ <Route path="/" element={<HomeComponent />} />
51+ <Route path="/about" element={<AboutComponent />} />
52+ </ApmRoutes>
53+ </BrowserRouter>
54+ )
55+ }
56+ }
57+ ----
58+
59+ [float]
60+ ===== Instrumenting application routes with @elastic/apm-rum-react < 2.0.0
2461
2562To instrument the application routes, you can use `ApmRoute` component provided in the package.
2663`ApmRoute` creates a transaction that has the path of the `Route` as its name and has `route-change`
2764as its type.
2865
29- NOTE: Currently `ApmRoute` only supports applications using
30- https://github.com/ReactTraining /react-router[`react-router`] library.
66+ NOTE: `ApmRoute` only supports applications using versions `4` and `5` of the
67+ https://github.com/remix-run /react-router[`react-router`] library.
3168
32- First you should import `ApmRoute` from the `@elastic/apm-rum-react` package:
69+ First import `ApmRoute` from the `@elastic/apm-rum-react` package:
3370
3471[source,js]
3572----
@@ -74,7 +111,7 @@ please instrument the individual component using `withTransaction` in these case
74111[float]
75112===== Instrumenting individual React components
76113
77- First you should import `withTransaction` from the `@elastic/apm-rum-react` package:
114+ First import `withTransaction` from the `@elastic/apm-rum-react` package:
78115
79116[source,js]
80117----
0 commit comments