diff --git a/packages/app/package.json b/packages/app/package.json
index c96797dac4..04e44093d4 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -76,6 +76,8 @@
     "react-dom": "^17.0.2",
     "react-router": "6.0.0-beta.0",
     "react-router-dom": "6.0.0-beta.0",
+    "react-router-stable": "npm:react-router@^6.3.0",
+    "react-router-dom-stable": "npm:react-router-dom@^6.3.0",
     "react-use": "^17.2.4",
     "zen-observable": "^0.8.15"
   },
diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
index 9e47ec9ed5..f14e6d1680 100644
--- a/packages/app/src/App.tsx
+++ b/packages/app/src/App.tsx
@@ -145,20 +145,20 @@ const AppRouter = app.getRouter();
 
 const routes = (
   <FlatRoutes>
-    <Route path="/" element={<Navigate to="catalog" />} />
+    <Route element={<Navigate to="catalog" />} />
     {/* TODO(rubenl): Move this to / once its more mature and components exist */}
-    <Route path="/home" element={<HomepageCompositionRoot />}>
+    <Route path="home" element={<HomepageCompositionRoot />}>
       {homePage}
     </Route>
-    <Route path="/catalog" element={<CatalogIndexPage />} />
+    <Route path="catalog" element={<CatalogIndexPage />} />
     <Route
-      path="/catalog/:namespace/:kind/:name"
+      path="catalog/:namespace/:kind/:name"
       element={<CatalogEntityPage />}
     >
       {entityPage}
     </Route>
     <Route
-      path="/catalog-import"
+      path="catalog-import"
       element={
         <RequirePermission permission={catalogEntityCreatePermission}>
           <CatalogImportPage />
@@ -166,7 +166,7 @@ const routes = (
       }
     />
     <Route
-      path="/catalog-graph"
+      path="catalog-graph"
       element={
         <CatalogGraphPage
           initialState={{
@@ -187,9 +187,9 @@ const routes = (
         />
       }
     />
-    <Route path="/docs" element={<TechDocsIndexPage />} />
+    <Route path="docs" element={<TechDocsIndexPage />} />
     <Route
-      path="/docs/:namespace/:kind/:name/*"
+      path="docs/:namespace/:kind/:name/*"
       element={<TechDocsReaderPage />}
     >
       {techDocsPage}
@@ -200,7 +200,7 @@ const routes = (
       </TechDocsAddons>
     </Route>
     <Route
-      path="/create"
+      path="create"
       element={
         <ScaffolderPage
           defaultPreviewTemplate={defaultPreviewTemplate}
@@ -219,7 +219,7 @@ const routes = (
       </ScaffolderFieldExtensions>
     </Route>
     <Route
-      path="/create/next"
+      path="create/next"
       element={
         <NextScaffolderPage
           groups={[
@@ -236,35 +236,35 @@ const routes = (
         <DelayingComponentFieldExtension />
       </ScaffolderFieldExtensions>
     </Route>
-    <Route path="/explore" element={<ExplorePage />} />
+    <Route path="explore" element={<ExplorePage />} />
     <Route
-      path="/tech-radar"
+      path="tech-radar"
       element={<TechRadarPage width={1500} height={800} />}
     />
-    <Route path="/graphiql" element={<GraphiQLPage />} />
-    <Route path="/lighthouse" element={<LighthousePage />} />
-    <Route path="/api-docs" element={<ApiExplorerPage />} />
-    <Route path="/gcp-projects" element={<GcpProjectsPage />} />
-    <Route path="/newrelic" element={<NewRelicPage />} />
-    <Route path="/search" element={<SearchPage />}>
+    <Route path="graphiql" element={<GraphiQLPage />} />
+    <Route path="lighthouse" element={<LighthousePage />} />
+    <Route path="api-docs" element={<ApiExplorerPage />} />
+    <Route path="gcp-projects" element={<GcpProjectsPage />} />
+    <Route path="newrelic" element={<NewRelicPage />} />
+    <Route path="search" element={<SearchPage />}>
       {searchPage}
     </Route>
-    <Route path="/cost-insights" element={<CostInsightsPage />} />
+    <Route path="cost-insights" element={<CostInsightsPage />} />
     <Route
-      path="/cost-insights/investigating-growth"
+      path="cost-insights/investigating-growth"
       element={<CostInsightsProjectGrowthInstructionsPage />}
     />
     <Route
-      path="/cost-insights/labeling-jobs"
+      path="cost-insights/labeling-jobs"
       element={<CostInsightsLabelDataflowInstructionsPage />}
     />
-    <Route path="/settings" element={<UserSettingsPage />}>
-      <UserSettingsTab path="/advanced" title="Advanced">
+    <Route path="settings" element={<UserSettingsPage />}>
+      <UserSettingsTab path="advanced" title="Advanced">
         <AdvancedSettings />
       </UserSettingsTab>
     </Route>
-    <Route path="/azure-pull-requests" element={<AzurePullRequestsPage />} />
-    <Route path="/apache-airflow" element={<ApacheAirflowPage />} />
+    <Route path="azure-pull-requests" element={<AzurePullRequestsPage />} />
+    <Route path="apache-airflow" element={<ApacheAirflowPage />} />
   </FlatRoutes>
 );
 
diff --git a/packages/core-app-api/src/app/AppManager.tsx b/packages/core-app-api/src/app/AppManager.tsx
index f36d37f796..434a29246a 100644
--- a/packages/core-app-api/src/app/AppManager.tsx
+++ b/packages/core-app-api/src/app/AppManager.tsx
@@ -58,6 +58,7 @@ import { pluginCollector } from '../plugins/collectors';
 import {
   featureFlagCollector,
   routingV1Collector,
+  routingV2Collector,
 } from '../routing/collectors';
 import { RoutingProvider } from '../routing/RoutingProvider';
 import { RouteTracker } from '../routing/RouteTracker';
@@ -221,9 +222,9 @@ export class AppManager implements BackstageApp {
       const { routing, featureFlags, routeBindings } = useMemo(() => {
         const result = traverseElementTree({
           root: children,
-          discoverers: [childDiscoverer, routeElementDiscoverer],
+          discoverers: [childDiscoverer],
           collectors: {
-            routing: routingV1Collector,
+            routing: routingV2Collector,
             collectedPlugins: pluginCollector,
             featureFlags: featureFlagCollector,
           },
diff --git a/packages/core-app-api/src/routing/collectors.test.tsx b/packages/core-app-api/src/routing/collectors.test.tsx
index f22c8d91a6..08f5a3bc35 100644
--- a/packages/core-app-api/src/routing/collectors.test.tsx
+++ b/packages/core-app-api/src/routing/collectors.test.tsx
@@ -14,399 +14,463 @@
  * limitations under the License.
  */
 
-import React, { PropsWithChildren } from 'react';
-import { routingV1Collector, routingV2Collector } from './collectors';
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+import type { RouteRef, BackstagePlugin } from '@backstage/core-plugin-api';
 
-import {
-  traverseElementTree,
-  childDiscoverer,
-  routeElementDiscoverer,
-} from '../extensions/traversal';
-import {
-  createRoutableExtension,
-  createRouteRef,
-  createPlugin,
-  RouteRef,
-  attachComponentData,
-  BackstagePlugin,
-} from '@backstage/core-plugin-api';
-import { MemoryRouter, Routes, Route } from 'react-router-dom';
+describe.each(['beta', 'stable'])('react-router %s', v => {
+  beforeAll(() => {
+    jest.doMock('react-router', () =>
+      v === 'beta'
+        ? jest.requireActual('react-router')
+        : jest.requireActual('react-router-stable'),
+    );
+    jest.doMock('react-router-dom', () =>
+      v === 'beta'
+        ? jest.requireActual('react-router-dom')
+        : jest.requireActual('react-router-dom-stable'),
+    );
+  });
 
-const MockComponent = ({ children }: PropsWithChildren<{ path?: string }>) => (
-  <>{children}</>
-);
+  function requireDeps() {
+    return {
+      ...(require('./collectors') as typeof import('./collectors')),
+      ...(require('../extensions/traversal') as typeof import('../extensions/traversal')),
+      ...(require('@backstage/core-plugin-api') as typeof import('@backstage/core-plugin-api')),
+      ...(require('react-router-dom') as typeof import('react-router-dom')),
+    };
+  }
 
-const plugin = createPlugin({ id: 'my-plugin' });
+  afterAll(() => {
+    jest.resetModules();
+    jest.resetAllMocks();
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+  });
 
-const ref1 = createRouteRef({ id: 'ref1' });
-const ref2 = createRouteRef({ id: 'ref2' });
-const ref3 = createRouteRef({ id: 'ref3' });
-const ref4 = createRouteRef({ id: 'ref4' });
-const ref5 = createRouteRef({ id: 'ref5' });
-const refOrder = [ref1, ref2, ref3, ref4, ref5];
+  it('does something', () => {
+    const { Route } = requireDeps();
+    console.log('DEBUG: Route =', Route);
+  });
 
-const Extension1 = plugin.provide(
-  createRoutableExtension({
-    name: 'Extension1',
-    component: () => Promise.resolve(MockComponent),
-    mountPoint: ref1,
-  }),
-);
-const Extension2 = plugin.provide(
-  createRoutableExtension({
-    name: 'Extension2',
-    component: () => Promise.resolve(MockComponent),
-    mountPoint: ref2,
-  }),
-);
-const Extension3 = plugin.provide(
-  createRoutableExtension({
-    name: 'Extension3',
-    component: () => Promise.resolve(MockComponent),
-    mountPoint: ref3,
-  }),
-);
-const Extension4 = plugin.provide(
-  createRoutableExtension({
-    name: 'Extension4',
-    component: () => Promise.resolve(MockComponent),
-    mountPoint: ref4,
-  }),
-);
-const Extension5 = plugin.provide(
-  createRoutableExtension({
-    name: 'Extension5',
-    component: () => Promise.resolve(MockComponent),
-    mountPoint: ref5,
-  }),
-);
+  const MockComponent = ({
+    children,
+  }: PropsWithChildren<{ path?: string }>) => <>{children}</>;
 
-const AggregationComponent = ({
-  children,
-}: PropsWithChildren<{
-  path: string;
-}>) => <>{children}</>;
+  const plugin = createPlugin({ id: 'my-plugin' });
 
-attachComponentData(AggregationComponent, 'core.gatherMountPoints', true);
+  const ref1 = createRouteRef({ id: 'ref1' });
+  const ref2 = createRouteRef({ id: 'ref2' });
+  const ref3 = createRouteRef({ id: 'ref3' });
+  const ref4 = createRouteRef({ id: 'ref4' });
+  const ref5 = createRouteRef({ id: 'ref5' });
+  const refOrder = [ref1, ref2, ref3, ref4, ref5];
 
-function sortedEntries<T>(map: Map<RouteRef, T>): [RouteRef, T][] {
-  return Array.from(map).sort(
-    ([a], [b]) => refOrder.indexOf(a) - refOrder.indexOf(b),
+  const Extension1 = plugin.provide(
+    createRoutableExtension({
+      name: 'Extension1',
+      component: () => Promise.resolve(MockComponent),
+      mountPoint: ref1,
+    }),
+  );
+  const Extension2 = plugin.provide(
+    createRoutableExtension({
+      name: 'Extension2',
+      component: () => Promise.resolve(MockComponent),
+      mountPoint: ref2,
+    }),
+  );
+  const Extension3 = plugin.provide(
+    createRoutableExtension({
+      name: 'Extension3',
+      component: () => Promise.resolve(MockComponent),
+      mountPoint: ref3,
+    }),
+  );
+  const Extension4 = plugin.provide(
+    createRoutableExtension({
+      name: 'Extension4',
+      component: () => Promise.resolve(MockComponent),
+      mountPoint: ref4,
+    }),
+  );
+  const Extension5 = plugin.provide(
+    createRoutableExtension({
+      name: 'Extension5',
+      component: () => Promise.resolve(MockComponent),
+      mountPoint: ref5,
+    }),
   );
-}
 
-function routeObj(
-  path: string,
-  refs: RouteRef[],
-  children: any[] = [],
-  type: 'mounted' | 'gathered' = 'mounted',
-  backstagePlugin?: BackstagePlugin,
-) {
-  return {
-    path: path,
-    caseSensitive: false,
-    element: type,
-    routeRefs: new Set(refs),
-    children: [
-      {
-        path: '*',
-        caseSensitive: false,
-        element: 'match-all',
-        routeRefs: new Set(),
-      },
-      ...children,
-    ],
-    plugin: backstagePlugin,
-  };
-}
+  const AggregationComponent = ({
+    children,
+  }: PropsWithChildren<{
+    path: string;
+  }>) => <>{children}</>;
 
-describe('routingV1Collector', () => {
-  it('should collect routes', () => {
-    const list = [
-      <div key={0} />,
-      <div key={1} />,
-      <div key={3}>
-        <Extension5 path="/blop" />
-      </div>,
-    ];
+  attachComponentData(AggregationComponent, 'core.gatherMountPoints', true);
 
-    const root = (
-      <MemoryRouter>
-        <Routes>
-          <Extension1 path="/foo">
+  function sortedEntries<T>(map: Map<RouteRef, T>): [RouteRef, T][] {
+    return Array.from(map).sort(
+      ([a], [b]) => refOrder.indexOf(a) - refOrder.indexOf(b),
+    );
+  }
+
+  function routeObj(
+    path: string,
+    refs: RouteRef[],
+    children: any[] = [],
+    type: 'mounted' | 'gathered' = 'mounted',
+    backstagePlugin?: BackstagePlugin,
+  ) {
+    return {
+      path: path,
+      caseSensitive: false,
+      element: type,
+      routeRefs: new Set(refs),
+      children: [
+        {
+          path: '*',
+          caseSensitive: false,
+          element: 'match-all',
+          routeRefs: new Set(),
+        },
+        ...children,
+      ],
+      plugin: backstagePlugin,
+    };
+  }
+
+  describe('routingV1Collector', () => {
+    it('should collect routes', () => {
+      const list = [
+        <div key={0} />,
+        <div key={1} />,
+        <div key={3}>
+          <Extension5 path="/blop" />
+        </div>,
+      ];
+
+      const root = (
+        <MemoryRouter>
+          <Routes>
+            <Extension1 path="/foo">
+              <div>
+                <Extension2 path="/bar/:id">
+                  <div>
+                    <div />
+                    Some text here shouldn't be a problem
+                    <div />
+                    {null}
+                    <div />
+                    <Extension3 path="/baz" />
+                  </div>
+                </Extension2>
+                {false}
+                {list}
+                {true}
+                {0}
+              </div>
+            </Extension1>
             <div>
-              <Extension2 path="/bar/:id">
-                <div>
-                  <div />
-                  Some text here shouldn't be a problem
-                  <div />
-                  {null}
-                  <div />
-                  <Extension3 path="/baz" />
-                </div>
-              </Extension2>
-              {false}
-              {list}
-              {true}
-              {0}
+              <Route path="/divsoup" element={<Extension4 />} />
             </div>
-          </Extension1>
-          <div>
-            <Route path="/divsoup" element={<Extension4 />} />
-          </div>
-        </Routes>
-      </MemoryRouter>
-    );
+          </Routes>
+        </MemoryRouter>
+      );
 
-    const { routing } = traverseElementTree({
-      root,
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV1Collector,
-      },
-    });
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/bar/:id'],
-      [ref3, '/baz'],
-      [ref4, '/divsoup'],
-      [ref5, '/blop'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, ref1],
-      [ref3, ref2],
-      [ref4, undefined],
-      [ref5, ref1],
-    ]);
-    expect(routing.objects).toEqual([
-      routeObj(
-        '/foo',
-        [ref1],
-        [
-          routeObj('/bar/:id', [ref2], [routeObj('/baz', [ref3])]),
-          routeObj('/blop', [ref5]),
-        ],
-      ),
-      routeObj('/divsoup', [ref4], undefined, undefined, plugin),
-    ]);
-  });
-
-  it('should handle all react router Route patterns', () => {
-    const root = (
-      <MemoryRouter>
-        <Routes>
-          <Route
-            path="/foo"
-            element={
-              <Extension1>
-                <Routes>
-                  <Extension2 path="/bar/:id" />
-                </Routes>
-              </Extension1>
-            }
-          />
-          <Route path="/baz" element={<Extension3 path="/not-used" />}>
-            <Route path="/divsoup" element={<Extension4 />} />
-            <Extension5 path="/blop" />
-          </Route>
-        </Routes>
-      </MemoryRouter>
-    );
-
-    const { routing } = traverseElementTree({
-      root,
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV1Collector,
-      },
-    });
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/bar/:id'],
-      [ref3, '/baz'],
-      [ref4, '/divsoup'],
-      [ref5, '/blop'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, ref1],
-      [ref3, undefined],
-      [ref4, ref3],
-      [ref5, ref3],
-    ]);
-  });
-
-  it('should use the route aggregator key to bind child routes to the same path', () => {
-    const root = (
-      <MemoryRouter>
-        <Routes>
-          <AggregationComponent path="/foo">
-            <Extension1 />
-            <div>
-              <Extension2 />
-            </div>
-            HELLO
-          </AggregationComponent>
-          <Extension3 path="/bar">
-            <AggregationComponent path="/baz">
-              <Extension4>
-                <Extension5 />
-              </Extension4>
-            </AggregationComponent>
-          </Extension3>
-        </Routes>
-      </MemoryRouter>
-    );
-
-    const { routing } = traverseElementTree({
-      root,
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV1Collector,
-      },
-    });
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/foo'],
-      [ref3, '/bar'],
-      [ref4, '/baz'],
-      [ref5, '/baz'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, undefined],
-      [ref3, undefined],
-      [ref4, ref3],
-      [ref5, ref3],
-    ]);
-    expect(routing.objects).toEqual([
-      routeObj('/foo', [ref1, ref2], [], 'gathered'),
-      routeObj(
-        '/bar',
-        [ref3],
-        [routeObj('/baz', [ref4, ref5], [], 'gathered')],
-      ),
-    ]);
-  });
-
-  it('should use the route aggregator but stop when encountering explicit path', () => {
-    const root = (
-      <MemoryRouter>
-        <Routes>
-          <Extension1 path="/foo">
-            <AggregationComponent path="/bar">
-              <Extension2>
-                <Extension3 path="/baz">
-                  <Extension4 path="/blop" />
-                </Extension3>
-                <Extension5 />
-              </Extension2>
-            </AggregationComponent>
-          </Extension1>
-        </Routes>
-      </MemoryRouter>
-    );
-
-    const { routing } = traverseElementTree({
-      root,
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV1Collector,
-      },
-    });
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/bar'],
-      [ref3, '/baz'],
-      [ref4, '/blop'],
-      [ref5, '/bar'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, ref1],
-      [ref3, ref1],
-      [ref4, ref3],
-      [ref5, ref1],
-    ]);
-    expect(routing.objects).toEqual([
-      routeObj(
-        '/foo',
-        [ref1],
-        [
-          routeObj(
-            '/bar',
-            [ref2, ref5],
-            [routeObj('/baz', [ref3], [routeObj('/blop', [ref4])])],
-            'gathered',
-          ),
-        ],
-      ),
-    ]);
-  });
-
-  it('should stop gathering mount points after encountering explicit path', () => {
-    const root = (
-      <MemoryRouter>
-        <Routes>
-          <Extension1 path="/foo">
-            <AggregationComponent path="/bar">
-              <Extension2 path="/baz">
-                <Extension3 />
-              </Extension2>
-            </AggregationComponent>
-          </Extension1>
-        </Routes>
-      </MemoryRouter>
-    );
-
-    expect(() => {
-      traverseElementTree({
+      const { routing } = traverseElementTree({
         root,
         discoverers: [childDiscoverer, routeElementDiscoverer],
         collectors: {
           routing: routingV1Collector,
         },
       });
-    }).toThrow('Mounted routable extension must have a path');
-  });
-});
-
-describe('routingV2Collector', () => {
-  function routeRoot(element: JSX.Element) {
-    return (
-      <MemoryRouter>
-        <Routes>{element}</Routes>
-      </MemoryRouter>
-    );
-  }
-
-  it('should associate path with extension in element prop', () => {
-    const { routing } = traverseElementTree({
-      root: routeRoot(<Route path="/foo" element={<Extension1 />} />),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/bar/:id'],
+        [ref3, '/baz'],
+        [ref4, '/divsoup'],
+        [ref5, '/blop'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, ref1],
+        [ref3, ref2],
+        [ref4, undefined],
+        [ref5, ref1],
+      ]);
+      expect(routing.objects).toEqual([
+        routeObj(
+          '/foo',
+          [ref1],
+          [
+            routeObj('/bar/:id', [ref2], [routeObj('/baz', [ref3])]),
+            routeObj('/blop', [ref5]),
+          ],
+        ),
+        routeObj('/divsoup', [ref4], undefined, undefined, plugin),
+      ]);
     });
 
-    expect(sortedEntries(routing.paths)).toEqual([[ref1, '/foo']]);
-    expect(sortedEntries(routing.parents)).toEqual([[ref1, undefined]]);
-    expect(routing.objects).toEqual([
-      routeObj('/foo', [ref1], [], undefined, plugin),
-    ]);
+    it('should handle all react router Route patterns', () => {
+      const root = (
+        <MemoryRouter>
+          <Routes>
+            <Route
+              path="/foo"
+              element={
+                <Extension1>
+                  <Routes>
+                    <Extension2 path="/bar/:id" />
+                  </Routes>
+                </Extension1>
+              }
+            />
+            <Route path="/baz" element={<Extension3 path="/not-used" />}>
+              <Route path="/divsoup" element={<Extension4 />} />
+              <Extension5 path="/blop" />
+            </Route>
+          </Routes>
+        </MemoryRouter>
+      );
+
+      const { routing } = traverseElementTree({
+        root,
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV1Collector,
+        },
+      });
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/bar/:id'],
+        [ref3, '/baz'],
+        [ref4, '/divsoup'],
+        [ref5, '/blop'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, ref1],
+        [ref3, undefined],
+        [ref4, ref3],
+        [ref5, ref3],
+      ]);
+    });
+
+    it('should use the route aggregator key to bind child routes to the same path', () => {
+      const root = (
+        <MemoryRouter>
+          <Routes>
+            <AggregationComponent path="/foo">
+              <Extension1 />
+              <div>
+                <Extension2 />
+              </div>
+              HELLO
+            </AggregationComponent>
+            <Extension3 path="/bar">
+              <AggregationComponent path="/baz">
+                <Extension4>
+                  <Extension5 />
+                </Extension4>
+              </AggregationComponent>
+            </Extension3>
+          </Routes>
+        </MemoryRouter>
+      );
+
+      const { routing } = traverseElementTree({
+        root,
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV1Collector,
+        },
+      });
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/foo'],
+        [ref3, '/bar'],
+        [ref4, '/baz'],
+        [ref5, '/baz'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, undefined],
+        [ref3, undefined],
+        [ref4, ref3],
+        [ref5, ref3],
+      ]);
+      expect(routing.objects).toEqual([
+        routeObj('/foo', [ref1, ref2], [], 'gathered'),
+        routeObj(
+          '/bar',
+          [ref3],
+          [routeObj('/baz', [ref4, ref5], [], 'gathered')],
+        ),
+      ]);
+    });
+
+    it('should use the route aggregator but stop when encountering explicit path', () => {
+      const root = (
+        <MemoryRouter>
+          <Routes>
+            <Extension1 path="/foo">
+              <AggregationComponent path="/bar">
+                <Extension2>
+                  <Extension3 path="/baz">
+                    <Extension4 path="/blop" />
+                  </Extension3>
+                  <Extension5 />
+                </Extension2>
+              </AggregationComponent>
+            </Extension1>
+          </Routes>
+        </MemoryRouter>
+      );
+
+      const { routing } = traverseElementTree({
+        root,
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV1Collector,
+        },
+      });
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/bar'],
+        [ref3, '/baz'],
+        [ref4, '/blop'],
+        [ref5, '/bar'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, ref1],
+        [ref3, ref1],
+        [ref4, ref3],
+        [ref5, ref1],
+      ]);
+      expect(routing.objects).toEqual([
+        routeObj(
+          '/foo',
+          [ref1],
+          [
+            routeObj(
+              '/bar',
+              [ref2, ref5],
+              [routeObj('/baz', [ref3], [routeObj('/blop', [ref4])])],
+              'gathered',
+            ),
+          ],
+        ),
+      ]);
+    });
+
+    it('should stop gathering mount points after encountering explicit path', () => {
+      const root = (
+        <MemoryRouter>
+          <Routes>
+            <Extension1 path="/foo">
+              <AggregationComponent path="/bar">
+                <Extension2 path="/baz">
+                  <Extension3 />
+                </Extension2>
+              </AggregationComponent>
+            </Extension1>
+          </Routes>
+        </MemoryRouter>
+      );
+
+      expect(() => {
+        traverseElementTree({
+          root,
+          discoverers: [childDiscoverer, routeElementDiscoverer],
+          collectors: {
+            routing: routingV1Collector,
+          },
+        });
+      }).toThrow('Mounted routable extension must have a path');
+    });
   });
 
-  it('should not allow multiple extensions within the same element prop', () => {
-    expect(() =>
-      traverseElementTree({
+  describe('routingV2Collector', () => {
+    function routeRoot(element: JSX.Element) {
+      return (
+        <MemoryRouter>
+          <Routes>{element}</Routes>
+        </MemoryRouter>
+      );
+    }
+
+    it('should associate path with extension in element prop', () => {
+      const { routing } = traverseElementTree({
+        root: routeRoot(<Route path="/foo" element={<Extension1 />} />),
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV2Collector,
+        },
+      });
+
+      expect(sortedEntries(routing.paths)).toEqual([[ref1, '/foo']]);
+      expect(sortedEntries(routing.parents)).toEqual([[ref1, undefined]]);
+      expect(routing.objects).toEqual([
+        routeObj('/foo', [ref1], [], undefined, plugin),
+      ]);
+    });
+
+    it('should not allow multiple extensions within the same element prop', () => {
+      expect(() =>
+        traverseElementTree({
+          root: routeRoot(
+            <Route
+              path="/foo"
+              element={
+                <>
+                  <Extension1 />
+                  <Extension2 />
+                </>
+              }
+            />,
+          ),
+          discoverers: [childDiscoverer, routeElementDiscoverer],
+          collectors: {
+            routing: routingV2Collector,
+          },
+        }),
+      ).toThrow('Route element may not contain multiple routable extensions');
+    });
+
+    it('should not support inline path', () => {
+      expect(() =>
+        traverseElementTree({
+          root: routeRoot(<Extension1 path="/foo" />),
+          discoverers: [childDiscoverer, routeElementDiscoverer],
+          collectors: {
+            routing: routingV2Collector,
+          },
+        }),
+      ).toThrow(
+        'Path property may not be set directly on a routable extension',
+      );
+    });
+
+    it('should associate the path with extensions deep in the element prop', () => {
+      const { routing } = traverseElementTree({
         root: routeRoot(
           <Route
             path="/foo"
             element={
               <>
-                <Extension1 />
-                <Extension2 />
+                <div>
+                  <span />
+                  {[
+                    undefined,
+                    null,
+                    <main>
+                      <Extension1 />
+                    </main>,
+                  ]}
+                </div>
               </>
             }
           />,
@@ -415,389 +479,351 @@ describe('routingV2Collector', () => {
         collectors: {
           routing: routingV2Collector,
         },
-      }),
-    ).toThrow('Route element may not contain multiple routable extensions');
-  });
+      });
 
-  it('should not support inline path', () => {
-    expect(() =>
-      traverseElementTree({
-        root: routeRoot(<Extension1 path="/foo" />),
-        discoverers: [childDiscoverer, routeElementDiscoverer],
-        collectors: {
-          routing: routingV2Collector,
-        },
-      }),
-    ).toThrow('Path property may not be set directly on a routable extension');
-  });
-
-  it('should associate the path with extensions deep in the element prop', () => {
-    const { routing } = traverseElementTree({
-      root: routeRoot(
-        <Route
-          path="/foo"
-          element={
-            <>
-              <div>
-                <span />
-                {[
-                  undefined,
-                  null,
-                  <main>
-                    <Extension1 />
-                  </main>,
-                ]}
-              </div>
-            </>
-          }
-        />,
-      ),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
+      expect(sortedEntries(routing.paths)).toEqual([[ref1, '/foo']]);
+      expect(sortedEntries(routing.parents)).toEqual([[ref1, undefined]]);
+      expect(routing.objects).toEqual([
+        routeObj('/foo', [ref1], [], undefined, plugin),
+      ]);
     });
 
-    expect(sortedEntries(routing.paths)).toEqual([[ref1, '/foo']]);
-    expect(sortedEntries(routing.parents)).toEqual([[ref1, undefined]]);
-    expect(routing.objects).toEqual([
-      routeObj('/foo', [ref1], [], undefined, plugin),
-    ]);
-  });
+    it('should not associate path with extension in children prop', () => {
+      expect(() =>
+        traverseElementTree({
+          root: routeRoot(
+            <Route path="/foo">
+              <Extension1 />
+            </Route>,
+          ),
+          discoverers: [childDiscoverer, routeElementDiscoverer],
+          collectors: {
+            routing: routingV2Collector,
+          },
+        }),
+      ).toThrow('Routable extension must be assigned a path');
+    });
 
-  it('should not associate path with extension in children prop', () => {
-    expect(() =>
-      traverseElementTree({
+    it('should assign parent for extension in element prop', () => {
+      const { routing } = traverseElementTree({
         root: routeRoot(
-          <Route path="/foo">
-            <Extension1 />
+          <Route path="/foo" element={<Extension1 />}>
+            <Route path="/bar" element={<Extension2 />} />
           </Route>,
         ),
         discoverers: [childDiscoverer, routeElementDiscoverer],
         collectors: {
           routing: routingV2Collector,
         },
-      }),
-    ).toThrow('Routable extension must be assigned a path');
-  });
-
-  it('should assign parent for extension in element prop', () => {
-    const { routing } = traverseElementTree({
-      root: routeRoot(
-        <Route path="/foo" element={<Extension1 />}>
-          <Route path="/bar" element={<Extension2 />} />
-        </Route>,
-      ),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
-    });
-
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/bar'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, ref1],
-    ]);
-    expect(routing.objects).toEqual([
-      routeObj(
-        '/foo',
-        [ref1],
-        [routeObj('/bar', [ref2], [], undefined, plugin)],
-        undefined,
-        plugin,
-      ),
-    ]);
-  });
-
-  it('should not allow paths within element props', () => {
-    expect(() => {
-      traverseElementTree({
-        root: routeRoot(
-          <Route
-            path="."
-            element={<Route path="/foo" element={<Extension1 />} />}
-          />,
-        ),
-        discoverers: [childDiscoverer, routeElementDiscoverer],
-        collectors: {
-          routing: routingV2Collector,
-        },
       });
-    }).toThrow('Elements within the element prop tree may not contain paths');
-  });
 
-  it('should not allow extensions within the element prop to have path props either', () => {
-    expect(() => {
-      traverseElementTree({
-        root: routeRoot(
-          <Route path="." element={<Extension1 path="/foo" />} />,
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/bar'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, ref1],
+      ]);
+      expect(routing.objects).toEqual([
+        routeObj(
+          '/foo',
+          [ref1],
+          [routeObj('/bar', [ref2], [], undefined, plugin)],
+          undefined,
+          plugin,
         ),
-        discoverers: [childDiscoverer, routeElementDiscoverer],
-        collectors: {
-          routing: routingV2Collector,
-        },
-      });
-    }).toThrow('Elements within the element prop tree may not contain paths');
-  });
-
-  it('should gather extension', () => {
-    const { routing } = traverseElementTree({
-      root: routeRoot(
-        <AggregationComponent path="/foo">
-          <Extension1 />
-        </AggregationComponent>,
-      ),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
+      ]);
     });
 
-    expect(sortedEntries(routing.paths)).toEqual([[ref1, '/foo']]);
-    expect(sortedEntries(routing.parents)).toEqual([[ref1, undefined]]);
-    expect(routing.objects).toEqual([routeObj('/foo', [ref1], [], 'gathered')]);
-  });
-
-  it('should reset gathering if path prop is encountered', () => {
-    const { routing } = traverseElementTree({
-      root: routeRoot(
-        <AggregationComponent path="/foo">
-          <Extension1>
-            <Route path="/bar" element={<Extension2 />} />
-          </Extension1>
-        </AggregationComponent>,
-      ),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
-    });
-
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/bar'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, ref1],
-    ]);
-    expect(routing.objects).toEqual([
-      routeObj(
-        '/foo',
-        [ref1],
-        [routeObj('/bar', [ref2], [], undefined, plugin)],
-        'gathered',
-      ),
-    ]);
-  });
-
-  it('should collect routes defined with different patterns', () => {
-    const list = [
-      <div key={0} />,
-      <div key={1} />,
-      <div key={3}>
-        <Route path="/blop" element={<Extension5 />} />
-      </div>,
-    ];
-
-    const { routing } = traverseElementTree({
-      root: routeRoot(
-        <>
-          <Route path="/foo" element={<Extension1 />}>
-            <div>
-              <Route path="/bar/:id" element={<Extension2 />}>
-                <div>
-                  <div />
-                  Some text here shouldn't be a problem
-                  <div />
-                  {null}
-                  <div />
-                  <Route path="/baz" element={<Extension3 />} />
-                </div>
-              </Route>
-              {false}
-              {list}
-              {true}
-              {0}
-            </div>
-          </Route>
-          <div>
-            <Route path="/divsoup" element={<Extension4 />} />
-          </div>
-        </>,
-      ),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
-    });
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/bar/:id'],
-      [ref3, '/baz'],
-      [ref4, '/divsoup'],
-      [ref5, '/blop'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, ref1],
-      [ref3, ref2],
-      [ref4, undefined],
-      [ref5, ref1],
-    ]);
-    expect(routing.objects).toEqual([
-      routeObj(
-        '/foo',
-        [ref1],
-        [
-          routeObj(
-            '/bar/:id',
-            [ref2],
-            [routeObj('/baz', [ref3], [], undefined, plugin)],
-            undefined,
-            plugin,
+    it('should not allow paths within element props', () => {
+      expect(() => {
+        traverseElementTree({
+          root: routeRoot(
+            <Route
+              path="."
+              element={<Route path="/foo" element={<Extension1 />} />}
+            />,
           ),
-          routeObj('/blop', [ref5], [], undefined, plugin),
-        ],
-        undefined,
-        plugin,
-      ),
-      routeObj('/divsoup', [ref4], undefined, undefined, plugin),
-    ]);
-  });
+          discoverers: [childDiscoverer, routeElementDiscoverer],
+          collectors: {
+            routing: routingV2Collector,
+          },
+        });
+      }).toThrow('Elements within the element prop tree may not contain paths');
+    });
 
-  it('should handle a subset of react router Route patterns', () => {
-    const { routing } = traverseElementTree({
-      root: routeRoot(
-        <>
-          <Route path="/foo" element={<Extension1 />} />
-          <Route
-            path="/baz"
-            element={
+    it('should not allow extensions within the element prop to have path props either', () => {
+      expect(() => {
+        traverseElementTree({
+          root: routeRoot(
+            <Route path="." element={<Extension1 path="/foo" />} />,
+          ),
+          discoverers: [childDiscoverer, routeElementDiscoverer],
+          collectors: {
+            routing: routingV2Collector,
+          },
+        });
+      }).toThrow('Elements within the element prop tree may not contain paths');
+    });
+
+    it('should gather extension', () => {
+      const { routing } = traverseElementTree({
+        root: routeRoot(
+          <AggregationComponent path="/foo">
+            <Extension1 />
+          </AggregationComponent>,
+        ),
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV2Collector,
+        },
+      });
+
+      expect(sortedEntries(routing.paths)).toEqual([[ref1, '/foo']]);
+      expect(sortedEntries(routing.parents)).toEqual([[ref1, undefined]]);
+      expect(routing.objects).toEqual([
+        routeObj('/foo', [ref1], [], 'gathered'),
+      ]);
+    });
+
+    it('should reset gathering if path prop is encountered', () => {
+      const { routing } = traverseElementTree({
+        root: routeRoot(
+          <AggregationComponent path="/foo">
+            <Extension1>
+              <Route path="/bar" element={<Extension2 />} />
+            </Extension1>
+          </AggregationComponent>,
+        ),
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV2Collector,
+        },
+      });
+
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/bar'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, ref1],
+      ]);
+      expect(routing.objects).toEqual([
+        routeObj(
+          '/foo',
+          [ref1],
+          [routeObj('/bar', [ref2], [], undefined, plugin)],
+          'gathered',
+        ),
+      ]);
+    });
+
+    it('should collect routes defined with different patterns', () => {
+      const list = [
+        <div key={0} />,
+        <div key={1} />,
+        <div key={3}>
+          <Route path="/blop" element={<Extension5 />} />
+        </div>,
+      ];
+
+      const { routing } = traverseElementTree({
+        root: routeRoot(
+          <>
+            <Route path="/foo" element={<Extension1 />}>
+              <div>
+                <Route path="/bar/:id" element={<Extension2 />}>
+                  <div>
+                    <div />
+                    Some text here shouldn't be a problem
+                    <div />
+                    {null}
+                    <div />
+                    <Route path="/baz" element={<Extension3 />} />
+                  </div>
+                </Route>
+                {false}
+                {list}
+                {true}
+                {0}
+              </div>
+            </Route>
+            <div>
+              <Route path="/divsoup" element={<Extension4 />} />
+            </div>
+          </>,
+        ),
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV2Collector,
+        },
+      });
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/bar/:id'],
+        [ref3, '/baz'],
+        [ref4, '/divsoup'],
+        [ref5, '/blop'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, ref1],
+        [ref3, ref2],
+        [ref4, undefined],
+        [ref5, ref1],
+      ]);
+      expect(routing.objects).toEqual([
+        routeObj(
+          '/foo',
+          [ref1],
+          [
+            routeObj(
+              '/bar/:id',
+              [ref2],
+              [routeObj('/baz', [ref3], [], undefined, plugin)],
+              undefined,
+              plugin,
+            ),
+            routeObj('/blop', [ref5], [], undefined, plugin),
+          ],
+          undefined,
+          plugin,
+        ),
+        routeObj('/divsoup', [ref4], undefined, undefined, plugin),
+      ]);
+    });
+
+    it('should handle a subset of react router Route patterns', () => {
+      const { routing } = traverseElementTree({
+        root: routeRoot(
+          <>
+            <Route path="/foo" element={<Extension1 />} />
+            <Route
+              path="/baz"
+              element={
+                <div>
+                  <Extension2 />
+                </div>
+              }
+            >
+              <Route path="/child" element={<Extension3 />} />
+              <AggregationComponent path="/collected">
+                <Extension4 />
+              </AggregationComponent>
+            </Route>
+          </>,
+        ),
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV2Collector,
+        },
+      });
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/baz'],
+        [ref3, '/child'],
+        [ref4, '/collected'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, undefined],
+        [ref3, ref2],
+        [ref4, ref2],
+      ]);
+    });
+
+    it('should bind child routes to the same path with a gatherer flag', () => {
+      const { routing } = traverseElementTree({
+        root: routeRoot(
+          <>
+            <AggregationComponent path="/foo">
+              <Extension1 />
               <div>
                 <Extension2 />
               </div>
-            }
-          >
-            <Route path="/child" element={<Extension3 />} />
-            <AggregationComponent path="/collected">
-              <Extension4 />
+              HELLO
             </AggregationComponent>
-          </Route>
-        </>,
-      ),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
+          </>,
+        ),
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV2Collector,
+        },
+      });
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/foo'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, undefined],
+      ]);
+      expect(routing.objects).toEqual([
+        routeObj('/foo', [ref1, ref2], [], 'gathered'),
+      ]);
     });
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/baz'],
-      [ref3, '/child'],
-      [ref4, '/collected'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, undefined],
-      [ref3, ref2],
-      [ref4, ref2],
-    ]);
-  });
 
-  it('should bind child routes to the same path with a gatherer flag', () => {
-    const { routing } = traverseElementTree({
-      root: routeRoot(
-        <>
-          <AggregationComponent path="/foo">
-            <Extension1 />
-            <div>
-              <Extension2 />
-            </div>
-            HELLO
-          </AggregationComponent>
-        </>,
-      ),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
+    it('should gather routes but stop when encountering explicit path', () => {
+      const { routing } = traverseElementTree({
+        root: routeRoot(
+          <Route path="/foo" element={<Extension1 />}>
+            <AggregationComponent path="/bar">
+              <Extension2>
+                <Route path="/baz" element={<Extension3 />}>
+                  <AggregationComponent path="/blop">
+                    <Extension4 />
+                  </AggregationComponent>
+                </Route>
+                <Extension5 />
+              </Extension2>
+            </AggregationComponent>
+          </Route>,
+        ),
+        discoverers: [childDiscoverer, routeElementDiscoverer],
+        collectors: {
+          routing: routingV2Collector,
+        },
+      });
+      expect(sortedEntries(routing.paths)).toEqual([
+        [ref1, '/foo'],
+        [ref2, '/bar'],
+        [ref3, '/baz'],
+        [ref4, '/blop'],
+        [ref5, '/bar'],
+      ]);
+      expect(sortedEntries(routing.parents)).toEqual([
+        [ref1, undefined],
+        [ref2, ref1],
+        [ref3, ref2],
+        [ref4, ref3],
+        [ref5, ref1],
+      ]);
+      expect(routing.objects).toEqual([
+        routeObj(
+          '/foo',
+          [ref1],
+          [
+            routeObj(
+              '/bar',
+              [ref2, ref5],
+              [
+                routeObj(
+                  '/baz',
+                  [ref3],
+                  [routeObj('/blop', [ref4], [], 'gathered')],
+                  undefined,
+                  plugin,
+                ),
+              ],
+              'gathered',
+            ),
+          ],
+          undefined,
+          plugin,
+        ),
+      ]);
     });
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/foo'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, undefined],
-    ]);
-    expect(routing.objects).toEqual([
-      routeObj('/foo', [ref1, ref2], [], 'gathered'),
-    ]);
-  });
-
-  it('should gather routes but stop when encountering explicit path', () => {
-    const { routing } = traverseElementTree({
-      root: routeRoot(
-        <Route path="/foo" element={<Extension1 />}>
-          <AggregationComponent path="/bar">
-            <Extension2>
-              <Route path="/baz" element={<Extension3 />}>
-                <AggregationComponent path="/blop">
-                  <Extension4 />
-                </AggregationComponent>
-              </Route>
-              <Extension5 />
-            </Extension2>
-          </AggregationComponent>
-        </Route>,
-      ),
-      discoverers: [childDiscoverer, routeElementDiscoverer],
-      collectors: {
-        routing: routingV2Collector,
-      },
-    });
-    expect(sortedEntries(routing.paths)).toEqual([
-      [ref1, '/foo'],
-      [ref2, '/bar'],
-      [ref3, '/baz'],
-      [ref4, '/blop'],
-      [ref5, '/bar'],
-    ]);
-    expect(sortedEntries(routing.parents)).toEqual([
-      [ref1, undefined],
-      [ref2, ref1],
-      [ref3, ref2],
-      [ref4, ref3],
-      [ref5, ref1],
-    ]);
-    expect(routing.objects).toEqual([
-      routeObj(
-        '/foo',
-        [ref1],
-        [
-          routeObj(
-            '/bar',
-            [ref2, ref5],
-            [
-              routeObj(
-                '/baz',
-                [ref3],
-                [routeObj('/blop', [ref4], [], 'gathered')],
-                undefined,
-                plugin,
-              ),
-            ],
-            'gathered',
-          ),
-        ],
-        undefined,
-        plugin,
-      ),
-    ]);
   });
 });
diff --git a/packages/core-app-api/src/routing/collectors.tsx b/packages/core-app-api/src/routing/collectors.tsx
index e036a6ef3b..895be6afa2 100644
--- a/packages/core-app-api/src/routing/collectors.tsx
+++ b/packages/core-app-api/src/routing/collectors.tsx
@@ -128,12 +128,16 @@ export const routingV2Collector = createCollector(
       }
 
       if (elementProp) {
-        const [{ routeRef, plugin }, ...others] = collectSubTree(elementProp);
+        const [extension, ...others] = collectSubTree(elementProp);
         if (others.length > 0) {
           throw new Error(
             'Route element may not contain multiple routable extensions',
           );
         }
+        if (!extension) {
+          return ctx;
+        }
+        const { routeRef, plugin } = extension;
 
         const newObj = {
           path,
diff --git a/yarn.lock b/yarn.lock
index 962e89a7c0..b8edff8e57 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13459,6 +13459,8 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     react-dom "^17.0.2"
     react-router "6.0.0-beta.0"
     react-router-dom "6.0.0-beta.0"
+    react-router-dom-stable "npm:react-router-dom@^6.3.0"
+    react-router-stable "npm:react-router@^6.3.0"
     react-use "^17.2.4"
     zen-observable "^0.8.15"
 
@@ -22400,6 +22402,14 @@ react-resize-detector@^6.6.3:
     lodash "^4.17.21"
     resize-observer-polyfill "^1.5.1"
 
+"react-router-dom-stable@npm:react-router-dom@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz#a0216da813454e521905b5fa55e0e5176123f43d"
+  integrity sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==
+  dependencies:
+    history "^5.2.0"
+    react-router "6.3.0"
+
 react-router-dom@6.0.0-beta.0:
   version "6.0.0-beta.0"
   resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.0-beta.0.tgz#9dcc8555365f22f7fbd09f26b6b82543f3eb97d6"
@@ -22408,6 +22418,13 @@ react-router-dom@6.0.0-beta.0:
     prop-types "^15.7.2"
     react-router "6.0.0-beta.0"
 
+"react-router-stable@npm:react-router@^6.3.0", react-router@6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz#3970cc64b4cb4eae0c1ea5203a80334fdd175557"
+  integrity sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==
+  dependencies:
+    history "^5.2.0"
+
 react-router@6.0.0-beta.0:
   version "6.0.0-beta.0"
   resolved "https://registry.npmjs.org/react-router/-/react-router-6.0.0-beta.0.tgz#3e11f39b6ded4412c2fed9e4f989dd4c8156724d"