diff --git a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx
index 5f64407502e7b..5d02bc7da87e4 100644
--- a/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx
+++ b/src/platforms/javascript/guides/react/configuration/integrations/react-router.mdx
@@ -22,13 +22,15 @@ _(Available in version 7 and above)_
To use React Router v6 with Sentry:
-1. Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation and provide the functions it needs to enable performance tracing:
+Initialize `Sentry.reactRouterV6Instrumentation` as your routing instrumentation and provide the functions it needs to enable performance tracing:
- `useEffect` hook from `react`
- `useLocation` and `useNavigationType` hooks from `react-router-dom`
- `createRoutesFromChildren` and `matchRoutes` functions from `react-router-dom` or `react-router` packages.
-2. Wrap [`Routes`](https://reactrouter.com/docs/en/v6/api#routes-and-route) using `Sentry.withSentryReactRouterV6Routing` to create a higher order component, which will enable Sentry to reach your router context, as in the example below:
+### Usage With `` Component
+
+If you use the `` component from `react-router-dom` to define your routes, wrap [`Routes`](https://reactrouter.com/docs/en/v6/api#routes-and-route) using `Sentry.withSentryReactRouterV6Routing`. This creates a higher order component, which will enable Sentry to reach your router context, as in the example below:
```javascript
import React from 'react';
@@ -70,7 +72,62 @@ ReactDOM.render(
);
```
-Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, /teams/:teamid/user/:userid), where applicable.
+### Usage With `useRoutes` Hook
+_(Available in version 7.12.1 and above)_
+
+If you specify your route definitions as an object to the [`useRoutes` hook](https://reactrouter.com/en/main/hooks/use-routes), use `Sentry.wrapUseRoutes` to create a patched `useRoutes` hook that instruments your routes with Sentry.
+
+
+
+`wrapUseRoutes` should be called outside of a React component, as in the example below. It's also recommended that you assign the wrapped hook to a variable name starting with `use`, as per the [React documentation](https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook).
+
+
+
+```javascript
+import {
+ createRoutesFromChildren,
+ matchRoutes,
+ useLocation,
+ useNavigationType,
+ useRoutes,
+} from "react-router-dom";
+import { wrapUseRoutes } from "@sentry/react";
+import { useEffect } from "react";
+
+Sentry.init({
+ dsn: "__DSN__",
+ integrations: [
+ new BrowserTracing({
+ routingInstrumentation: Sentry.reactRouterV6Instrumentation(
+ useEffect,
+ useLocation,
+ useNavigationType,
+ createRoutesFromChildren,
+ matchRoutes,
+ ),
+ }),
+ ],
+ tracesSampleRate: 1.0,
+});
+
+const useSentryRoutes = wrapUseRoutes(useRoutes);
+
+function App() {
+ return useSentryRoutes([
+ // ...
+ ]);
+}
+
+ReactDOM.render(
+
+
+ ,
+ document.getElementById("root"),
+);
+```
+
+
+Now, Sentry should generate `pageload`/`navigation` transactions with parameterized transaction names (for example, `/teams/:teamid/user/:userid`), where applicable.
## React Router v4/v5