fix(react): Handle nested parameterized routes in reactrouterv3 transaction normalization (#16274)

We noticed that routes like `/teams/:teamId/details` were normalized to
`/teams:teamIddetails` which is missing `/` and is incorrect.

This PR updates the tests for the React Router v3 integration to ensure
correct transaction name normalization for nested parameterized routes.

Specifically, it modifies the `normalizes transaction name` test case to
include navigation to a route like `/teams/:teamId/details` and verifies
that the resulting transaction name is correctly normalized. This
addresses an issue where similar nested route patterns might not be
handled correctly.

Author: sidx1024

packages/react/src/reactrouterv3.ts

@@ -150,9 +150,8 @@ function getRouteStringFromRoutes(routes: Route[]): string {
     }
   }
 
-  return routesWithPaths
-    .slice(index)
-    .filter(({ path }) => !!path)
-    .map(({ path }) => path)
-    .join('');
+  return routesWithPaths.slice(index).reduce((acc, { path }) => {
+    const pathSegment = acc === '/' || acc === '' ? path : `/${path}`;
+    return `${acc}${pathSegment}`;
+  }, '');
 }

packages/react/test/reactrouterv3.test.tsx

@@ -64,6 +64,11 @@ describe('browserTracingReactRouterV3', () => {
         <Route path=":orgid" component={() => <div>OrgId</div>} />
         <Route path=":orgid/v1/:teamid" component={() => <div>Team</div>} />
       </Route>
+      <Route path="teams">
+        <Route path=":teamId">
+          <Route path="details" component={() => <div>Team Details</div>} />
+        </Route>
+      </Route>
     </Route>
   );
   const history = createMemoryHistory();
@@ -192,6 +197,22 @@ describe('browserTracingReactRouterV3', () => {
         [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
       },
     });
+    expect(getCurrentScope().getScopeData().transactionName).toEqual('/users/:userid');
+
+    act(() => {
+      history.push('/teams/456/details');
+    });
+
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenCalledTimes(2);
+    expect(mockStartBrowserTracingNavigationSpan).toHaveBeenLastCalledWith(expect.any(BrowserClient), {
+      name: '/teams/:teamId/details',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.react.reactrouter_v3',
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+      },
+    });
+    expect(getCurrentScope().getScopeData().transactionName).toEqual('/teams/:teamId/details');
   });
 
   it("updates the scope's `transactionName` on a navigation", () => {