Skip to content

Commit 774c832

Browse files
authored
docs: update 5.x react docs (#1413)
1 parent 943fc0a commit 774c832

File tree

1 file changed

+42
-5
lines changed

1 file changed

+42
-5
lines changed

docs/react-integration.asciidoc

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,53 @@ npm install @elastic/apm-rum-react --save
2020
The 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

2562
To 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`
2764
as 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

Comments
 (0)