---
title: "Set up React Router v4 or v5 | Grafana Cloud documentation"
description: "Get started with Frontend Observability with React Router v4 or v5."
---
> For a curated documentation index, see [llms.txt](/llms.txt). For the complete documentation index, see [llms-full.txt](/llms-full.txt).
# Set up React Router v4 or v5
Follow these steps to get started quickly with the Faro-React Web SDK for React Router v4 or v5.
1. Install the Faro-React Web SDK
2. 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:
sh  Copy
```sh
# install globally
npm i @grafana/faro-react
```
Or the following command Yarn:
sh  Copy
```sh
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.
ts  Copy
```ts
import { createBrowserHistory } from 'history';
import { Route } from 'react-router-dom';
import {
// or createReactRouterV4Options
createReactRouterV5Options,
getWebInstrumentations,
initializeFaro,
ReactIntegration,
ReactRouterVersion,
} from '@grafana/faro-react';
const history = createBrowserHistory();
initializeFaro({
// Mandatory, the URL of the Grafana collector
url: 'my/collector/url',
// Mandatory, the identification label of your application
app: {
name: 'my-react-app',
},
// ...
instrumentations: [
// Load the default Web instrumentations
...getWebInstrumentations(),
new ReactIntegration({
// or createReactRouterV4Options
router: createReactRouterV5Options({
history, // the history object used by react-router
Route, // Route component imported from react-router package
}),
}),
],
});
```
To instrument React Router v4, v5 import the `` component and use it instead of the React router `` component, for example:
tsx  Copy
```tsx
import { FaroRoute } from '@grafana/faro-react';
// during render
{/* ... */}
;
```
## Next
Refer to the [JavaScript quickstart documentation](/docs/grafana-cloud/monitor-applications/frontend-observability/quickstart/javascript/) for instructions on how to create and send data to a Grafana Cloud Frontend Application.