fix(react): Fix React Router v6 paramaterization

packages/react/src/reactrouterv6.tsx

@@ -20,9 +20,23 @@ type Params<Key extends string = string> = {
   readonly [key in Key]: string | undefined;
 };
 
+// https://github.com/remix-run/react-router/blob/9fa54d643134cd75a0335581a75db8100ed42828/packages/react-router/lib/router.ts#L114-L134
 interface RouteMatch<ParamKey extends string = string> {
+  /**
+   * The names and values of dynamic parameters in the URL.
+   */
   params: Params<ParamKey>;
+  /**
+   * The portion of the URL pathname that was matched.
+   */
   pathname: string;
+  /**
+   * The portion of the URL pathname that was matched before child routes.
+   */
+  pathnameBase: string;
+  /**
+   * The route object that was used to match.
+   */
   route: RouteObject;
 }
 
@@ -94,13 +108,31 @@ function getNormalizedName(
 
   const branches = matchRoutes(routes, location);
 
+  let pathBuilder = '';
   if (branches) {
     // eslint-disable-next-line @typescript-eslint/prefer-for-of
     for (let x = 0; x < branches.length; x++) {
-      if (branches[x].route && branches[x].route.path && branches[x].pathname === location.pathname) {
-        const path = branches[x].route.path;
+      const branch = branches[x];
+      const route = branch.route;
+      if (route) {
+        // Early return if index route
+        if (route.index) {
+          return [branch.pathname, 'route'];
+        }
+
+        const path = route.path;
         if (path) {
-          return [path, 'route'];
+          const newPath = path[0] === '/' ? path : `/${path}`;
+          pathBuilder += newPath;
+          if (branch.pathname === location.pathname) {
+            // If the route defined on the element is something like
+            // <Route path="/stores/:storeId/products/:productId" element={<div>Product</div>} />
+            // We should check against the branch.pathname for the number of / seperators
+            if (pathBuilder.split('/').length !== branch.pathname.split('/').length) {
+              return [newPath, 'route'];
+            }
+            return [pathBuilder, 'route'];
+          }
         }
       }
     }

packages/react/test/reactrouterv6.test.tsx

@@ -196,4 +196,38 @@ describe('React Router v6', () => {
       metadata: { source: 'route' },
     });
   });
+
+  it('works with nested paths with parameters', () => {
+    const [mockStartTransaction] = createInstrumentation();
+    const SentryRoutes = withSentryReactRouterV6Routing(Routes);
+
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <SentryRoutes>
+          <Route index element={<Navigate to="/projects/123/views/234" />} />
+          <Route path="account" element={<div>Account Page</div>} />
+          <Route path="projects">
+            <Route index element={<div>Project Index</div>} />
+            <Route path=":projectId" element={<div>Project Page</div>}>
+              <Route index element={<div>Project Page Root</div>} />
+              <Route element={<div>Editor</div>}>
+                <Route path="views/:viewId" element={<div>View Canvas</div>} />
+                <Route path="spaces/:spaceId" element={<div>Space Canvas</div>} />
+              </Route>
+            </Route>
+          </Route>
+
+          <Route path="*" element={<div>No Match Page</div>} />
+        </SentryRoutes>
+      </MemoryRouter>,
+    );
+
+    expect(mockStartTransaction).toHaveBeenCalledTimes(2);
+    expect(mockStartTransaction).toHaveBeenLastCalledWith({
+      name: '/projects/:projectId/views/:viewId',
+      op: 'navigation',
+      tags: { 'routing.instrumentation': 'react-router-v6' },
+      metadata: { source: 'route' },
+    });
+  });
 });