diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ad66d1e77801..c8be42b00d3b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -6,7 +6,15 @@ export type { ErrorBoundaryProps, FallbackRender } from './errorboundary';
 export { ErrorBoundary, withErrorBoundary } from './errorboundary';
 export { createReduxEnhancer } from './redux';
 export { reactRouterV3Instrumentation } from './reactrouterv3';
-export { reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter';
+export {
+  // eslint-disable-next-line deprecation/deprecation
+  reactRouterV4Instrumentation,
+  // eslint-disable-next-line deprecation/deprecation
+  reactRouterV5Instrumentation,
+  withSentryRouting,
+  reactRouterV4BrowserTracingIntegration,
+  reactRouterV5BrowserTracingIntegration,
+} from './reactrouter';
 export {
   reactRouterV6Instrumentation,
   withSentryReactRouterV6Routing,
diff --git a/packages/react/src/reactrouter.tsx b/packages/react/src/reactrouter.tsx
index 04995ee4bc44..ba6fc523ee58 100644
--- a/packages/react/src/reactrouter.tsx
+++ b/packages/react/src/reactrouter.tsx
@@ -1,6 +1,18 @@
-import { WINDOW } from '@sentry/browser';
-import { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
-import type { Transaction, TransactionSource } from '@sentry/types';
+import {
+  WINDOW,
+  browserTracingIntegration,
+  startBrowserTracingNavigationSpan,
+  startBrowserTracingPageLoadSpan,
+} from '@sentry/browser';
+import {
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  getActiveSpan,
+  getRootSpan,
+  spanToJSON,
+} from '@sentry/core';
+import type { Integration, Span, StartSpanOptions, Transaction, TransactionSource } from '@sentry/types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import * as React from 'react';
 
@@ -23,29 +35,121 @@ export type RouteConfig = {
   routes?: RouteConfig[];
 };
 
-type MatchPath = (pathname: string, props: string | string[] | any, parent?: Match | null) => Match | null; // eslint-disable-line @typescript-eslint/no-explicit-any
+export type MatchPath = (pathname: string, props: string | string[] | any, parent?: Match | null) => Match | null; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+interface ReactRouterOptions {
+  history: RouterHistory;
+  routes?: RouteConfig[];
+  matchPath?: MatchPath;
+}
 
 let activeTransaction: Transaction | undefined;
 
+/**
+ * A browser tracing integration that uses React Router v4 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export function reactRouterV4BrowserTracingIntegration(
+  options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions,
+): Integration {
+  const integration = browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
+
+  const { history, routes, matchPath, instrumentPageLoad = true, instrumentNavigation = true } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startPageloadCallback = (startSpanOptions: StartSpanOptions): undefined => {
+        startBrowserTracingPageLoadSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const startNavigationCallback = (startSpanOptions: StartSpanOptions): undefined => {
+        startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      // eslint-disable-next-line deprecation/deprecation
+      const instrumentation = reactRouterV4Instrumentation(history, routes, matchPath);
+
+      // Now instrument page load & navigation with correct settings
+      instrumentation(startPageloadCallback, instrumentPageLoad, false);
+      instrumentation(startNavigationCallback, false, instrumentNavigation);
+    },
+  };
+}
+
+/**
+ * A browser tracing integration that uses React Router v5 to instrument navigations.
+ * Expects `history` (and optionally `routes` and `matchPath`) to be passed as options.
+ */
+export function reactRouterV5BrowserTracingIntegration(
+  options: Parameters<typeof browserTracingIntegration>[0] & ReactRouterOptions,
+): Integration {
+  const integration = browserTracingIntegration({
+    ...options,
+    instrumentPageLoad: false,
+    instrumentNavigation: false,
+  });
+
+  const { history, routes, matchPath } = options;
+
+  return {
+    ...integration,
+    afterAllSetup(client) {
+      integration.afterAllSetup(client);
+
+      const startPageloadCallback = (startSpanOptions: StartSpanOptions): undefined => {
+        startBrowserTracingPageLoadSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      const startNavigationCallback = (startSpanOptions: StartSpanOptions): undefined => {
+        startBrowserTracingNavigationSpan(client, startSpanOptions);
+        return undefined;
+      };
+
+      // eslint-disable-next-line deprecation/deprecation
+      const instrumentation = reactRouterV5Instrumentation(history, routes, matchPath);
+
+      // Now instrument page load & navigation with correct settings
+      instrumentation(startPageloadCallback, options.instrumentPageLoad, false);
+      instrumentation(startNavigationCallback, false, options.instrumentNavigation);
+    },
+  };
+}
+
+/**
+ * @deprecated Use `browserTracingReactRouterV4()` instead.
+ */
 export function reactRouterV4Instrumentation(
   history: RouterHistory,
   routes?: RouteConfig[],
   matchPath?: MatchPath,
 ): ReactRouterInstrumentation {
-  return createReactRouterInstrumentation(history, 'react-router-v4', routes, matchPath);
+  return createReactRouterInstrumentation(history, 'reactrouter_v4', routes, matchPath);
 }
 
+/**
+ * @deprecated Use `browserTracingReactRouterV5()` instead.
+ */
 export function reactRouterV5Instrumentation(
   history: RouterHistory,
   routes?: RouteConfig[],
   matchPath?: MatchPath,
 ): ReactRouterInstrumentation {
-  return createReactRouterInstrumentation(history, 'react-router-v5', routes, matchPath);
+  return createReactRouterInstrumentation(history, 'reactrouter_v5', routes, matchPath);
 }
 
 function createReactRouterInstrumentation(
   history: RouterHistory,
-  name: string,
+  instrumentationName: string,
   allRoutes: RouteConfig[] = [],
   matchPath?: MatchPath,
 ): ReactRouterInstrumentation {
@@ -83,21 +187,17 @@ function createReactRouterInstrumentation(
     return [pathname, 'url'];
   }
 
-  const tags = {
-    'routing.instrumentation': name,
-  };
-
   return (customStartTransaction, startTransactionOnPageLoad = true, startTransactionOnLocationChange = true): void => {
     const initPathName = getInitPathName();
+
     if (startTransactionOnPageLoad && initPathName) {
       const [name, source] = normalizeTransactionName(initPathName);
       activeTransaction = customStartTransaction({
         name,
-        op: 'pageload',
-        origin: 'auto.pageload.react.reactrouter',
-        tags,
-        metadata: {
-          source,
+        attributes: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.pageload.react.${instrumentationName}`,
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
         },
       });
     }
@@ -112,11 +212,10 @@ function createReactRouterInstrumentation(
           const [name, source] = normalizeTransactionName(location.pathname);
           activeTransaction = customStartTransaction({
             name,
-            op: 'navigation',
-            origin: 'auto.navigation.react.reactrouter',
-            tags,
-            metadata: {
-              source,
+            attributes: {
+              [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+              [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: `auto.navigation.react.${instrumentationName}`,
+              [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: source,
             },
           });
         }
@@ -164,10 +263,12 @@ function computeRootMatch(pathname: string): Match {
 export function withSentryRouting<P extends Record<string, any>, R extends React.ComponentType<P>>(Route: R): R {
   const componentDisplayName = (Route as any).displayName || (Route as any).name;
 
+  const activeRootSpan = getActiveRootSpan();
+
   const WrappedRoute: React.FC<P> = (props: P) => {
-    if (activeTransaction && props && props.computedMatch && props.computedMatch.isExact) {
-      activeTransaction.updateName(props.computedMatch.path);
-      activeTransaction.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+    if (activeRootSpan && props && props.computedMatch && props.computedMatch.isExact) {
+      activeRootSpan.updateName(props.computedMatch.path);
+      activeRootSpan.setAttribute(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
     }
 
     // @ts-expect-error Setting more specific React Component typing for `R` generic above
@@ -184,3 +285,22 @@ export function withSentryRouting<P extends Record<string, any>, R extends React
   return WrappedRoute;
 }
 /* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access */
+
+function getActiveRootSpan(): Span | undefined {
+  // Legacy behavior for "old" react router instrumentation
+  if (activeTransaction) {
+    return activeTransaction;
+  }
+
+  const span = getActiveSpan();
+  const rootSpan = span ? getRootSpan(span) : undefined;
+
+  if (!rootSpan) {
+    return undefined;
+  }
+
+  const op = spanToJSON(rootSpan).op;
+
+  // Only use this root span if it is a pageload or navigation span
+  return op === 'navigation' || op === 'pageload' ? rootSpan : undefined;
+}
diff --git a/packages/react/test/reactrouterv4.test.tsx b/packages/react/test/reactrouterv4.test.tsx
index 5849bb688598..973bda75d273 100644
--- a/packages/react/test/reactrouterv4.test.tsx
+++ b/packages/react/test/reactrouterv4.test.tsx
@@ -1,14 +1,26 @@
-import { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import {
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  createTransport,
+  getCurrentScope,
+  setCurrentClient,
+} from '@sentry/core';
 import { act, render } from '@testing-library/react';
 import { createMemoryHistory } from 'history-4';
 // biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
 import * as React from 'react';
 import { Route, Router, Switch, matchPath } from 'react-router-4';
 
-import { reactRouterV4Instrumentation, withSentryRouting } from '../src';
+import {
+  BrowserClient,
+  reactRouterV4BrowserTracingIntegration,
+  reactRouterV4Instrumentation,
+  withSentryRouting,
+} from '../src';
 import type { RouteConfig } from '../src/reactrouter';
 
-describe('React Router v4', () => {
+describe('reactRouterV4Instrumentation', () => {
   function createInstrumentation(_opts?: {
     startTransactionOnPageLoad?: boolean;
     startTransactionOnLocationChange?: boolean;
@@ -28,6 +40,7 @@ describe('React Router v4', () => {
     const mockStartTransaction = jest
       .fn()
       .mockReturnValue({ updateName: mockUpdateName, end: mockFinish, setAttribute: mockSetAttribute });
+    // eslint-disable-next-line deprecation/deprecation
     reactRouterV4Instrumentation(history, options.routes, options.matchPath)(
       mockStartTransaction,
       options.startTransactionOnPageLoad,
@@ -41,10 +54,11 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(1);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/',
-      op: 'pageload',
-      origin: 'auto.pageload.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+      },
     });
   });
 
@@ -71,10 +85,11 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/about',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
 
     act(() => {
@@ -83,10 +98,11 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/features',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
   });
 
@@ -162,10 +178,11 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/users/123',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
   });
 
@@ -190,10 +207,11 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/users/123',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
     expect(mockUpdateName).toHaveBeenCalledTimes(2);
     expect(mockUpdateName).toHaveBeenLastCalledWith('/users/:userid');
@@ -221,10 +239,11 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/1234/v1/758',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
     expect(mockUpdateName).toHaveBeenCalledTimes(2);
     expect(mockUpdateName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid');
@@ -238,10 +257,11 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/543',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
     expect(mockUpdateName).toHaveBeenCalledTimes(3);
     expect(mockUpdateName).toHaveBeenLastCalledWith('/organizations/:orgid');
@@ -273,10 +293,11 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/:orgid/v1/:teamid',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'route' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
 
     act(() => {
@@ -285,10 +306,339 @@ describe('React Router v4', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/:orgid',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v4' },
-      metadata: { source: 'route' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+  });
+});
+
+const mockStartBrowserTracingPageLoadSpan = jest.fn();
+const mockStartBrowserTracingNavigationSpan = jest.fn();
+
+const mockRootSpan = {
+  updateName: jest.fn(),
+  setAttribute: jest.fn(),
+  getSpanJSON() {
+    return { op: 'pageload' };
+  },
+};
+
+jest.mock('@sentry/browser', () => {
+  const actual = jest.requireActual('@sentry/browser');
+  return {
+    ...actual,
+    startBrowserTracingNavigationSpan: (...args: unknown[]) => {
+      mockStartBrowserTracingNavigationSpan(...args);
+      return actual.startBrowserTracingNavigationSpan(...args);
+    },
+    startBrowserTracingPageLoadSpan: (...args: unknown[]) => {
+      mockStartBrowserTracingPageLoadSpan(...args);
+      return actual.startBrowserTracingPageLoadSpan(...args);
+    },
+  };
+});
+
+jest.mock('@sentry/core', () => {
+  const actual = jest.requireActual('@sentry/core');
+  return {
+    ...actual,
+    getRootSpan: () => {
+      return mockRootSpan;
+    },
+  };
+});
+
+describe('browserTracingReactRouterV4', () => {
+  function createMockBrowserClient(): BrowserClient {
+    return new BrowserClient({
+      integrations: [],
+      transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+      stackParser: () => [],
+      debug: true,
+    });
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getCurrentScope().setClient(undefined);
+  });
+
+  it('starts a pageload transaction when instrumentation is started', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    expect(mockStartBrowserTracingPageLoadSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingPageLoadSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+      },
+    });
+  });
+
+  it('starts a navigation transaction', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    render(
+      <Router history={history as any}>
+        <Switch>
+          <Route path="/features" component={() => <div>Features</div>} />
+          <Route path="/about" component={() => <div>About</div>} />
+          <Route path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/about');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/about',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+
+    act(() => {
+      history.push('/features');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(2);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/features',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+  });
+
+  it('only starts a navigation transaction on push', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    render(
+      <Router history={history as any}>
+        <Switch>
+          <Route path="/features" component={() => <div>Features</div>} />
+          <Route path="/about" component={() => <div>About</div>} />
+          <Route path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.replace('hello');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(0);
+  });
+
+  it('does not normalize transaction name ', () => {
+    const client = createMockBrowserClient();
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    const { getByText } = render(
+      <Router history={history as any}>
+        <Switch>
+          <Route path="/users/:userid" component={() => <div>UserId</div>} />
+          <Route path="/users" component={() => <div>Users</div>} />
+          <Route path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/users/123');
+    });
+    getByText('UserId');
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/users/123',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+  });
+
+  it('normalizes transaction name with custom Route', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    const SentryRoute = withSentryRouting(Route);
+
+    const { getByText } = render(
+      <Router history={history as any}>
+        <Switch>
+          <SentryRoute path="/users/:userid" component={() => <div>UserId</div>} />
+          <SentryRoute path="/users" component={() => <div>Users</div>} />
+          <SentryRoute path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/users/123');
+    });
+    getByText('UserId');
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/users/123',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+    expect(mockRootSpan.updateName).toHaveBeenCalledTimes(2);
+    expect(mockRootSpan.updateName).toHaveBeenLastCalledWith('/users/:userid');
+    expect(mockRootSpan.setAttribute).toHaveBeenCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+  });
+
+  it('normalizes nested transaction names with custom Route', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    const SentryRoute = withSentryRouting(Route);
+
+    const { getByText } = render(
+      <Router history={history as any}>
+        <Switch>
+          <SentryRoute path="/organizations/:orgid/v1/:teamid" component={() => <div>Team</div>} />
+          <SentryRoute path="/organizations/:orgid" component={() => <div>OrgId</div>} />
+          <SentryRoute path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/organizations/1234/v1/758');
+    });
+    getByText('Team');
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/organizations/1234/v1/758',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+    expect(mockRootSpan.updateName).toHaveBeenCalledTimes(2);
+    expect(mockRootSpan.updateName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid');
+    expect(mockRootSpan.setAttribute).toHaveBeenLastCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+
+    act(() => {
+      history.push('/organizations/543');
+    });
+    getByText('OrgId');
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(2);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/organizations/543',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+    expect(mockRootSpan.updateName).toHaveBeenCalledTimes(3);
+    expect(mockRootSpan.updateName).toHaveBeenLastCalledWith('/organizations/:orgid');
+    expect(mockRootSpan.setAttribute).toHaveBeenLastCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+  });
+
+  it('matches with route object', () => {
+    const routes: RouteConfig[] = [
+      {
+        path: '/organizations/:orgid/v1/:teamid',
+      },
+      { path: '/organizations/:orgid' },
+      { path: '/' },
+    ];
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV4BrowserTracingIntegration({ history, routes, matchPath }));
+
+    client.init();
+
+    render(
+      <Router history={history as any}>
+        <Switch>
+          <Route path="/organizations/:orgid/v1/:teamid" component={() => <div>Team</div>} />
+          <Route path="/organizations/:orgid" component={() => <div>OrgId</div>} />
+          <Route path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/organizations/1234/v1/758');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/organizations/:orgid/v1/:teamid',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+
+    act(() => {
+      history.push('/organizations/1234');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(2);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/organizations/:orgid',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v4',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
   });
 });
diff --git a/packages/react/test/reactrouterv5.test.tsx b/packages/react/test/reactrouterv5.test.tsx
index c571b3590b8f..b08f7de702a1 100644
--- a/packages/react/test/reactrouterv5.test.tsx
+++ b/packages/react/test/reactrouterv5.test.tsx
@@ -1,14 +1,26 @@
-import { SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
+import {
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  createTransport,
+  getCurrentScope,
+  setCurrentClient,
+} from '@sentry/core';
 import { act, render } from '@testing-library/react';
 import { createMemoryHistory } from 'history-4';
 // biome-ignore lint/nursery/noUnusedImports: Need React import for JSX
 import * as React from 'react';
 import { Route, Router, Switch, matchPath } from 'react-router-5';
 
-import { reactRouterV5Instrumentation, withSentryRouting } from '../src';
+import {
+  BrowserClient,
+  reactRouterV5BrowserTracingIntegration,
+  reactRouterV5Instrumentation,
+  withSentryRouting,
+} from '../src';
 import type { RouteConfig } from '../src/reactrouter';
 
-describe('React Router v5', () => {
+describe('reactRouterV5Instrumentation', () => {
   function createInstrumentation(_opts?: {
     startTransactionOnPageLoad?: boolean;
     startTransactionOnLocationChange?: boolean;
@@ -28,6 +40,7 @@ describe('React Router v5', () => {
     const mockStartTransaction = jest
       .fn()
       .mockReturnValue({ updateName: mockUpdateName, end: mockFinish, setAttribute: mockSetAttribute });
+    // eslint-disable-next-line deprecation/deprecation
     reactRouterV5Instrumentation(history, options.routes, options.matchPath)(
       mockStartTransaction,
       options.startTransactionOnPageLoad,
@@ -41,10 +54,11 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(1);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/',
-      op: 'pageload',
-      origin: 'auto.pageload.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+      },
     });
   });
 
@@ -71,10 +85,11 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/about',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
 
     act(() => {
@@ -83,10 +98,11 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/features',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
   });
 
@@ -162,17 +178,17 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/users/123',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
   });
 
   it('normalizes transaction name with custom Route', () => {
     const [mockStartTransaction, history, { mockUpdateName, mockSetAttribute }] = createInstrumentation();
     const SentryRoute = withSentryRouting(Route);
-
     const { getByText } = render(
       <Router history={history}>
         <Switch>
@@ -182,6 +198,7 @@ describe('React Router v5', () => {
         </Switch>
       </Router>,
     );
+
     act(() => {
       history.push('/users/123');
     });
@@ -190,20 +207,20 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/users/123',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
     expect(mockUpdateName).toHaveBeenCalledTimes(2);
     expect(mockUpdateName).toHaveBeenLastCalledWith('/users/:userid');
-    expect(mockSetAttribute).toHaveBeenLastCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+    expect(mockSetAttribute).toHaveBeenCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
   });
 
   it('normalizes nested transaction names with custom Route', () => {
     const [mockStartTransaction, history, { mockUpdateName, mockSetAttribute }] = createInstrumentation();
     const SentryRoute = withSentryRouting(Route);
-
     const { getByText } = render(
       <Router history={history}>
         <Switch>
@@ -222,10 +239,11 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/1234/v1/758',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
     expect(mockUpdateName).toHaveBeenCalledTimes(2);
     expect(mockUpdateName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid');
@@ -239,13 +257,15 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/543',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'url' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
     expect(mockUpdateName).toHaveBeenCalledTimes(3);
     expect(mockUpdateName).toHaveBeenLastCalledWith('/organizations/:orgid');
+    expect(mockSetAttribute).toHaveBeenLastCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
   });
 
   it('matches with route object', () => {
@@ -273,10 +293,11 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(2);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/:orgid/v1/:teamid',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'route' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
 
     act(() => {
@@ -285,10 +306,339 @@ describe('React Router v5', () => {
     expect(mockStartTransaction).toHaveBeenCalledTimes(3);
     expect(mockStartTransaction).toHaveBeenLastCalledWith({
       name: '/organizations/:orgid',
-      op: 'navigation',
-      origin: 'auto.navigation.react.reactrouter',
-      tags: { 'routing.instrumentation': 'react-router-v5' },
-      metadata: { source: 'route' },
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+  });
+});
+
+const mockStartBrowserTracingPageLoadSpan = jest.fn();
+const mockStartBrowserTracingNavigationSpan = jest.fn();
+
+const mockRootSpan = {
+  updateName: jest.fn(),
+  setAttribute: jest.fn(),
+  getSpanJSON() {
+    return { op: 'pageload' };
+  },
+};
+
+jest.mock('@sentry/browser', () => {
+  const actual = jest.requireActual('@sentry/browser');
+  return {
+    ...actual,
+    startBrowserTracingNavigationSpan: (...args: unknown[]) => {
+      mockStartBrowserTracingNavigationSpan(...args);
+      return actual.startBrowserTracingNavigationSpan(...args);
+    },
+    startBrowserTracingPageLoadSpan: (...args: unknown[]) => {
+      mockStartBrowserTracingPageLoadSpan(...args);
+      return actual.startBrowserTracingPageLoadSpan(...args);
+    },
+  };
+});
+
+jest.mock('@sentry/core', () => {
+  const actual = jest.requireActual('@sentry/core');
+  return {
+    ...actual,
+    getRootSpan: () => {
+      return mockRootSpan;
+    },
+  };
+});
+
+describe('browserTracingReactRouterV5', () => {
+  function createMockBrowserClient(): BrowserClient {
+    return new BrowserClient({
+      integrations: [],
+      transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+      stackParser: () => [],
+      debug: true,
+    });
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    getCurrentScope().setClient(undefined);
+  });
+
+  it('starts a pageload transaction when instrumentation is started', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    expect(mockStartBrowserTracingPageLoadSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingPageLoadSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+      },
+    });
+  });
+
+  it('starts a navigation transaction', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    render(
+      <Router history={history as any}>
+        <Switch>
+          <Route path="/features" component={() => <div>Features</div>} />
+          <Route path="/about" component={() => <div>About</div>} />
+          <Route path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/about');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/about',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+
+    act(() => {
+      history.push('/features');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(2);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/features',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+  });
+
+  it('only starts a navigation transaction on push', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    render(
+      <Router history={history as any}>
+        <Switch>
+          <Route path="/features" component={() => <div>Features</div>} />
+          <Route path="/about" component={() => <div>About</div>} />
+          <Route path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.replace('hello');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(0);
+  });
+
+  it('does not normalize transaction name ', () => {
+    const client = createMockBrowserClient();
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    const { getByText } = render(
+      <Router history={history as any}>
+        <Switch>
+          <Route path="/users/:userid" component={() => <div>UserId</div>} />
+          <Route path="/users" component={() => <div>Users</div>} />
+          <Route path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/users/123');
+    });
+    getByText('UserId');
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/users/123',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+  });
+
+  it('normalizes transaction name with custom Route', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    const SentryRoute = withSentryRouting(Route);
+
+    const { getByText } = render(
+      <Router history={history as any}>
+        <Switch>
+          <SentryRoute path="/users/:userid" component={() => <div>UserId</div>} />
+          <SentryRoute path="/users" component={() => <div>Users</div>} />
+          <SentryRoute path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/users/123');
+    });
+    getByText('UserId');
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/users/123',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+    expect(mockRootSpan.updateName).toHaveBeenCalledTimes(2);
+    expect(mockRootSpan.updateName).toHaveBeenLastCalledWith('/users/:userid');
+    expect(mockRootSpan.setAttribute).toHaveBeenCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+  });
+
+  it('normalizes nested transaction names with custom Route', () => {
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history }));
+
+    client.init();
+
+    const SentryRoute = withSentryRouting(Route);
+
+    const { getByText } = render(
+      <Router history={history as any}>
+        <Switch>
+          <SentryRoute path="/organizations/:orgid/v1/:teamid" component={() => <div>Team</div>} />
+          <SentryRoute path="/organizations/:orgid" component={() => <div>OrgId</div>} />
+          <SentryRoute path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/organizations/1234/v1/758');
+    });
+    getByText('Team');
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/organizations/1234/v1/758',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+    expect(mockRootSpan.updateName).toHaveBeenCalledTimes(2);
+    expect(mockRootSpan.updateName).toHaveBeenLastCalledWith('/organizations/:orgid/v1/:teamid');
+    expect(mockRootSpan.setAttribute).toHaveBeenLastCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+
+    act(() => {
+      history.push('/organizations/543');
+    });
+    getByText('OrgId');
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(2);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/organizations/543',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+    expect(mockRootSpan.updateName).toHaveBeenCalledTimes(3);
+    expect(mockRootSpan.updateName).toHaveBeenLastCalledWith('/organizations/:orgid');
+    expect(mockRootSpan.setAttribute).toHaveBeenLastCalledWith(SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, 'route');
+  });
+
+  it('matches with route object', () => {
+    const routes: RouteConfig[] = [
+      {
+        path: '/organizations/:orgid/v1/:teamid',
+      },
+      { path: '/organizations/:orgid' },
+      { path: '/' },
+    ];
+    const client = createMockBrowserClient();
+    setCurrentClient(client);
+
+    const history = createMemoryHistory();
+    client.addIntegration(reactRouterV5BrowserTracingIntegration({ history, routes, matchPath }));
+
+    client.init();
+
+    render(
+      <Router history={history as any}>
+        <Switch>
+          <Route path="/organizations/:orgid/v1/:teamid" component={() => <div>Team</div>} />
+          <Route path="/organizations/:orgid" component={() => <div>OrgId</div>} />
+          <Route path="/" component={() => <div>Home</div>} />
+        </Switch>
+      </Router>,
+    );
+
+    act(() => {
+      history.push('/organizations/1234/v1/758');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(1);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/organizations/:orgid/v1/:teamid',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+
+    act(() => {
+      history.push('/organizations/1234');
+    });
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(2);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/organizations/:orgid',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v5',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
     });
   });
 });