Setup for React Router v6 with no data router
Follow these steps to get started quickly with the Faro-React Web SDK for React Router v6 with no data router.
- 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
React Router v6
In the file you define your router, import createRoutesFromChildren
, matchRoutes
, Routes
, useLocation
, useNavigationType
from react-router-dom
and pass them to the dependencies object.
The final result should look similar like this example.
To instrument React Router v6 import the <FaroRoutes/>
component and use it instead of the React router <Routes />
component, for example:
import { FaroRoutes } from '@grafana/faro-react';
// during render
<FaroRoutes>
<Route path="/" element={<Home />} />
{/* ... */}
</FaroRoutes>;
Next
Refer to the JavaScript quickstart documentation for instructions on how to create and send data to a Grafana Cloud Frontend Application.