---
title: "React Router v4 and v5"
description: "Learn about Sentry's React Router v4 / v5 integration."
url: https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v4-5/
---

# React Router v4 and v5 | Sentry for React

Make sure you use a `Router` component combined with `createBrowserHistory` (or equivalent).

### [Parameterized Transaction Names](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v4-5.md#parameterized-transaction-names)

To get parameterized transaction names (for example, `/teams/:teamid/user/:userid` instead of `/teams/123/user/345`), you must explicitly set the routes you want parameterized. That's because there is no static route config that the SDK can use in React Router v4/v5.

We recommend you use the `withSentryRouting` higher order component to create a `SentryRoute` component that will update the match path on render.

```javascript
import {Route, Router, Switch } from 'react-router-dom';

import { createBrowserHistory } from 'history';

import * as Sentry from '@sentry/react';

// Create Custom Sentry Route component

const SentryRoute = Sentry.withSentryRouting(Route);


const history = createBrowserHistory();

Sentry.init({
  dsn: "___PUBLIC_DSN___",
  integrations: [

    Sentry.reactRouterV5BrowserTracingIntegration({ history }),
    // OR
    Sentry.reactRouterV4BrowserTracingIntegration({ history }),

  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

render() {
  return (
    <Router history={history}>
      <Switch>

        <SentryRoute path="/users/:userid" component={() => <div>UserId</div>} />
        <SentryRoute path="/users" component={() => <div>Users</div>} />
        <SentryRoute path="/" component={() => <div>Home</div>} />

      </Switch>
    </Router>
  );
}
```

If you don't want to wrap individual routes, you can still specify parameterized routes manually by passing an array of route config objects, per [react-router-config](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config), to the instrumentation function call. You'll also need to provide the `matchPath` function exported from the `react-router-dom` or `react-router` packages.

```javascript
import { Route, Router, Switch, matchPath } from 'react-router-dom';

import { createBrowserHistory } from 'history';

import * as Sentry from '@sentry/react';

const history = createBrowserHistory();


// Array of Route Config Objects
// Make sure the order of the routes is correct. The longest url under the same parent should be placed first and in decreasing order.
const routes = [{ path: '/users/:userid' }, { path: '/users' }, { path: '/' }];


Sentry.init({
  dsn: "___PUBLIC_DSN___",
  integrations: [

    Sentry.reactRouterV5BrowserTracingIntegration({
      history,
      routes,
      matchPath
    }),

  ],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

// In your App render:
render() {
  return (
    <Router history={history}>
      <Switch>
         <Route path="/users/:userid" component={() => <div>UserId</div>} />
         <Route path="/users" component={() => <div>Users</div>} />
         <Route path="/" component={() => <div>Home</div>} />
      </Switch>
    </Router>
  );
}
```

## [Next Steps:](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v4-5.md#next-steps)

* [Return to **Getting Started**](https://docs.sentry.io/platforms/javascript/guides/react/features.md)
* [Return to the main integrations page](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router.md)