Setup for React Router v4 or v5
Follow these steps to get started quickly with the Faro-React Web SDK for React Router v4 or v5.
- Install the Faro-React Web SDK
- Instrument your application
Install the Faro-React Web SDK
First add Faro-React to your project. Install the Faro-React package by running the following command for NPM:
# install globally
npm i @grafana/faro-react
Or the following command Yarn:
yarn add @grafana/faro-react
Instrument your application
To instrument React Router v4 or v5, import the Route
component from react-router-dom
and the history
object from the history
package and pass them to the dependencies object:
The final result should look similar like this example.
To instrument React Router v4, v5 import the <FaroRoute/>
component and use it instead of the React router <Route />
component, for example:
import { FaroRoute } from '@grafana/faro-react';
// during render
<Switch>
<FaroRoute path="/">
<Home />
</FaroRoute>
{/* ... */}
</Switch>;
Next
Refer to the JavaScript quickstart documentation for instructions on how to create and send data to a Grafana Cloud Frontend Application.