diff --git a/packages/kbn-typed-react-router-config/src/create_router.test.tsx b/packages/kbn-typed-react-router-config/src/create_router.test.tsx
index 9837d45ddd869..d29079f37ec12 100644
--- a/packages/kbn-typed-react-router-config/src/create_router.test.tsx
+++ b/packages/kbn-typed-react-router-config/src/create_router.test.tsx
@@ -10,16 +10,13 @@ import * as t from 'io-ts';
 import { toNumberRt } from '@kbn/io-ts-utils';
 import { createRouter } from './create_router';
 import { createMemoryHistory } from 'history';
-import { route } from './route';
 
 describe('createRouter', () => {
-  const routes = route([
-    {
-      path: '/',
+  const routes = {
+    '/': {
       element: <></>,
-      children: [
-        {
-          path: '/',
+      children: {
+        '/': {
           element: <></>,
           params: t.type({
             query: t.type({
@@ -32,31 +29,27 @@ describe('createRouter', () => {
               rangeFrom: 'now-30m',
             },
           },
-          children: [
-            {
-              path: '/services/{serviceName}/errors',
+          children: {
+            '/services/{serviceName}/errors': {
               element: <></>,
               params: t.type({
                 path: t.type({
                   serviceName: t.string,
                 }),
               }),
-              children: [
-                {
-                  path: '/services/{serviceName}/errors/{groupId}',
+              children: {
+                '/services/{serviceName}/errors/{groupId}': {
                   element: <></>,
                   params: t.type({
                     path: t.type({ groupId: t.string }),
                   }),
                 },
-                {
-                  path: '/services/{serviceName}/errors',
+                '/services/{serviceName}/errors': {
                   element: <></>,
                 },
-              ],
+              },
             },
-            {
-              path: '/services',
+            '/services': {
               element: <></>,
               params: t.type({
                 query: t.type({
@@ -64,13 +57,11 @@ describe('createRouter', () => {
                 }),
               }),
             },
-            {
-              path: '/services/{serviceName}',
+            '/services/{serviceName}': {
               element: <></>,
-              children: [
-                {
+              children: {
+                '/services/{serviceName}': {
                   element: <></>,
-                  path: '/services/{serviceName}',
                   params: t.type({
                     path: t.type({
                       serviceName: t.string,
@@ -81,10 +72,9 @@ describe('createRouter', () => {
                     }),
                   }),
                 },
-              ],
+              },
             },
-            {
-              path: '/traces',
+            '/traces': {
               element: <></>,
               params: t.type({
                 query: t.type({
@@ -93,8 +83,7 @@ describe('createRouter', () => {
                 }),
               }),
             },
-            {
-              path: '/service-map',
+            '/service-map': {
               element: <></>,
               params: t.type({
                 query: t.type({
@@ -102,11 +91,11 @@ describe('createRouter', () => {
                 }),
               }),
             },
-          ],
+          },
         },
-      ],
+      },
     },
-  ] as const);
+  };
 
   let history = createMemoryHistory();
   const router = createRouter(routes);
diff --git a/packages/kbn-typed-react-router-config/src/create_router.ts b/packages/kbn-typed-react-router-config/src/create_router.ts
index 27a4f1dd5de02..494540005224a 100644
--- a/packages/kbn-typed-react-router-config/src/create_router.ts
+++ b/packages/kbn-typed-react-router-config/src/create_router.ts
@@ -15,26 +15,29 @@ import {
 } from 'react-router-config';
 import qs from 'query-string';
 import { findLastIndex, merge, compact } from 'lodash';
-import { deepExactRt, mergeRt } from '@kbn/io-ts-utils';
-import { FlattenRoutesOf, Route, Router } from './types';
+import { mergeRt, deepExactRt } from '@kbn/io-ts-utils';
+import { FlattenRoutesOf, Route, RouteWithPath, Router, RouteMap } from './types';
 
 function toReactRouterPath(path: string) {
   return path.replace(/(?:{([^\/]+)})/g, ':$1');
 }
 
-export function createRouter<TRoutes extends Route[]>(routes: TRoutes): Router<TRoutes> {
+export function createRouter<TRoutes extends RouteMap>(routes: TRoutes): Router<TRoutes> {
   const routesByReactRouterConfig = new Map<ReactRouterConfig, Route>();
   const reactRouterConfigsByRoute = new Map<Route, ReactRouterConfig>();
 
-  const reactRouterConfigs = routes.map((route) => toReactRouterConfigRoute(route));
+  const reactRouterConfigs = Object.entries(routes).map(([path, route]) =>
+    toReactRouterConfigRoute({ ...route, path })
+  );
 
-  function toReactRouterConfigRoute(route: Route): ReactRouterConfig {
+  function toReactRouterConfigRoute(route: RouteWithPath): ReactRouterConfig {
     const reactRouterConfig: ReactRouterConfig = {
       component: () => route.element,
       routes:
-        (route.children as Route[] | undefined)?.map((child) => toReactRouterConfigRoute(child)) ??
-        [],
-      exact: !route.children?.length,
+        Object.entries((route.children as RouteMap | undefined) ?? {})?.map(([path, child]) =>
+          toReactRouterConfigRoute({ ...child, path })
+        ) ?? [],
+      exact: !route.children || Object.values(route.children).length === 0,
       path: toReactRouterPath(route.path),
     };
 
diff --git a/packages/kbn-typed-react-router-config/src/index.ts b/packages/kbn-typed-react-router-config/src/index.ts
index b58c70998901c..9ba68aed7e3b2 100644
--- a/packages/kbn-typed-react-router-config/src/index.ts
+++ b/packages/kbn-typed-react-router-config/src/index.ts
@@ -8,10 +8,8 @@
 export * from './create_router';
 export * from './types';
 export * from './outlet';
-export * from './route';
 export * from './route_renderer';
 export * from './router_provider';
-export * from './unconst';
 export * from './use_current_route';
 export * from './use_match_routes';
 export * from './use_params';
diff --git a/packages/kbn-typed-react-router-config/src/route.ts b/packages/kbn-typed-react-router-config/src/route.ts
deleted file mode 100644
index b9b228d1009e2..0000000000000
--- a/packages/kbn-typed-react-router-config/src/route.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-import { Route } from './types';
-import { Unconst, unconst } from './unconst';
-
-export function route<TRoute extends Route | Route[] | readonly Route[]>(
-  r: TRoute
-): Unconst<TRoute> {
-  return unconst(r);
-}
diff --git a/packages/kbn-typed-react-router-config/src/router_provider.tsx b/packages/kbn-typed-react-router-config/src/router_provider.tsx
index 657df9e9fc592..ef06964f230be 100644
--- a/packages/kbn-typed-react-router-config/src/router_provider.tsx
+++ b/packages/kbn-typed-react-router-config/src/router_provider.tsx
@@ -8,7 +8,7 @@
 import { History } from 'history';
 import React from 'react';
 import { Router as ReactRouter } from 'react-router-dom';
-import { Route, Router } from './types';
+import { RouteMap, Router } from './types';
 import { RouterContextProvider } from './use_router';
 
 export function RouterProvider({
@@ -16,7 +16,7 @@ export function RouterProvider({
   router,
   history,
 }: {
-  router: Router<Route[]>;
+  router: Router<RouteMap>;
   history: History;
   children: React.ReactNode;
 }) {
diff --git a/packages/kbn-typed-react-router-config/src/types/index.ts b/packages/kbn-typed-react-router-config/src/types/index.ts
index 97b58ce5a700f..a5121ba0d72c9 100644
--- a/packages/kbn-typed-react-router-config/src/types/index.ts
+++ b/packages/kbn-typed-react-router-config/src/types/index.ts
@@ -9,17 +9,31 @@
 import { Location } from 'history';
 import * as t from 'io-ts';
 import { ReactElement } from 'react';
-import { RequiredKeys, ValuesType } from 'utility-types';
-// import { unconst } from '../unconst';
+import { RequiredKeys, ValuesType, UnionToIntersection } from 'utility-types';
 import { NormalizePath } from './utils';
 
-// type PathsOfRoute<TRoute extends Route> =
-//   | TRoute['path']
-//   | (TRoute extends { children: Route[] }
-//       ? AppendPath<TRoute['path'], '/*'> | PathsOf<TRoute['children']>
-//       : never);
+export type PathsOf<TRouteMap extends RouteMap> = string &
+  ValuesType<{
+    [key in keyof TRouteMap]:
+      | key
+      | (TRouteMap[key] extends { children: RouteMap }
+          ? AppendPath<key & string, '*'> | PathsOf<TRouteMap[key]['children']>
+          : never);
+  }>;
 
-export type PathsOf<TRoutes extends Route[]> = keyof MapRoutes<TRoutes> & string;
+export type RouteMap = Record<string, Route>;
+
+export interface Route {
+  element: ReactElement;
+  children?: RouteMap;
+  params?: t.Type<any>;
+  defaults?: Record<string, Record<string, string>>;
+  pre?: ReactElement;
+}
+
+export interface RouteWithPath extends Route {
+  path: string;
+}
 
 export interface RouteMatch<TRoute extends Route = Route> {
   route: TRoute;
@@ -35,91 +49,55 @@ export interface RouteMatch<TRoute extends Route = Route> {
   };
 }
 
-type ToRouteMatch<TRoutes extends Route[]> = TRoutes extends []
-  ? []
-  : TRoutes extends [Route]
+type ToRouteMatch<TRoutes extends Route[]> = TRoutes extends [Route]
   ? [RouteMatch<TRoutes[0]>]
-  : TRoutes extends [Route, ...infer TTail]
-  ? TTail extends Route[]
-    ? [RouteMatch<TRoutes[0]>, ...ToRouteMatch<TTail>]
-    : []
-  : [];
-
-type UnwrapRouteMap<TRoute extends Route & { parents?: Route[] }> = TRoute extends {
-  parents: Route[];
-}
-  ? ToRouteMatch<[...TRoute['parents'], Omit<TRoute, 'parents'>]>
-  : ToRouteMatch<[Omit<TRoute, 'parents'>]>;
-
-export type Match<TRoutes extends Route[], TPath extends string> = MapRoutes<TRoutes> extends {
-  [key in TPath]: Route;
-}
-  ? UnwrapRouteMap<MapRoutes<TRoutes>[TPath]>
-  : [];
-
-interface PlainRoute {
-  path: string;
-  element: ReactElement;
-  children?: PlainRoute[];
-  params?: t.Type<any>;
-  defaults?: Record<string, Record<string, string>>;
-  pre?: ReactElement;
-}
-
-interface ReadonlyPlainRoute {
-  readonly path: string;
-  readonly element: ReactElement;
-  readonly children?: readonly ReadonlyPlainRoute[];
-  readonly params?: t.Type<any>;
-  readonly defaults?: Record<string, Record<string, string>>;
-  pre?: ReactElement;
-}
+  : TRoutes extends [Route, ...infer TNextRoutes]
+  ? [RouteMatch<TRoutes[0]>, ...(TNextRoutes extends Route[] ? ToRouteMatch<TNextRoutes> : [])]
+  : TRoutes extends []
+  ? []
+  : never;
 
-export type Route = PlainRoute | ReadonlyPlainRoute;
+export type Match<TRoutes extends RouteMap, TPath extends string> = MapRoutes<TRoutes>[TPath];
 
-interface DefaultOutput {
+export interface DefaultOutput {
   path: {};
   query: {};
 }
 
-type OutputOfRouteMatch<TRouteMatch extends RouteMatch> = TRouteMatch extends {
-  route: { params: t.Type<any> };
+type OutputOfRoute<TRoute extends Route> = TRoute extends {
+  params: t.Type<any>;
 }
-  ? t.OutputOf<TRouteMatch['route']['params']>
-  : DefaultOutput;
+  ? t.OutputOf<TRoute['params']>
+  : {};
 
-type OutputOfMatches<TRouteMatches extends RouteMatch[]> = TRouteMatches extends [RouteMatch]
-  ? OutputOfRouteMatch<TRouteMatches[0]>
-  : TRouteMatches extends [RouteMatch, ...infer TNextRouteMatches]
-  ? OutputOfRouteMatch<TRouteMatches[0]> &
-      (TNextRouteMatches extends RouteMatch[] ? OutputOfMatches<TNextRouteMatches> : DefaultOutput)
-  : TRouteMatches extends RouteMatch[]
-  ? OutputOfRouteMatch<ValuesType<TRouteMatches>>
-  : DefaultOutput;
+type OutputOfRoutes<TRoutes extends Route[]> = TRoutes extends [Route]
+  ? OutputOfRoute<TRoutes[0]>
+  : TRoutes extends [Route, ...infer TNextRoutes]
+  ? OutputOfRoute<TRoutes[0]> & (TNextRoutes extends Route[] ? OutputOfRoutes<TNextRoutes> : {})
+  : {};
 
-export type OutputOf<TRoutes extends Route[], TPath extends PathsOf<TRoutes>> = OutputOfMatches<
+export type OutputOf<TRoutes extends RouteMap, TPath extends PathsOf<TRoutes>> = OutputOfRoutes<
   Match<TRoutes, TPath>
 > &
   DefaultOutput;
 
-type TypeOfRouteMatch<TRouteMatch extends RouteMatch> = TRouteMatch extends {
-  route: { params: t.Type<any> };
+type TypeOfRoute<TRoute extends Route> = TRoute extends {
+  params: t.Type<any>;
 }
-  ? t.TypeOf<TRouteMatch['route']['params']>
+  ? t.TypeOf<TRoute['params']>
   : {};
 
-type TypeOfMatches<TRouteMatches extends RouteMatch[]> = TRouteMatches extends [RouteMatch]
-  ? TypeOfRouteMatch<TRouteMatches[0]>
-  : TRouteMatches extends [RouteMatch, ...infer TNextRouteMatches]
-  ? TypeOfRouteMatch<TRouteMatches[0]> &
-      (TNextRouteMatches extends RouteMatch[] ? TypeOfMatches<TNextRouteMatches> : {})
+type TypeOfRoutes<TRoutes extends Route[]> = TRoutes extends [Route]
+  ? TypeOfRoute<TRoutes[0]>
+  : TRoutes extends [Route, ...infer TNextRoutes]
+  ? TypeOfRoute<TRoutes[0]> & (TNextRoutes extends Route[] ? TypeOfRoutes<TNextRoutes> : {})
   : {};
 
 export type TypeOf<
-  TRoutes extends Route[],
+  TRoutes extends RouteMap,
   TPath extends PathsOf<TRoutes>,
   TWithDefaultOutput extends boolean = true
-> = TypeOfMatches<Match<TRoutes, TPath>> & (TWithDefaultOutput extends true ? DefaultOutput : {});
+> = TypeOfRoutes<Match<TRoutes, TPath>> & (TWithDefaultOutput extends true ? DefaultOutput : {});
 
 export type TypeAsArgs<TObject> = keyof TObject extends never
   ? []
@@ -127,16 +105,18 @@ export type TypeAsArgs<TObject> = keyof TObject extends never
   ? [TObject] | []
   : [TObject];
 
-export type FlattenRoutesOf<TRoutes extends Route[]> = Array<
-  Omit<ValuesType<MapRoutes<TRoutes>>, 'parents'>
+export type FlattenRoutesOf<TRoutes extends RouteMap> = Array<
+  ValuesType<{
+    [key in keyof MapRoutes<TRoutes>]: ValuesType<MapRoutes<TRoutes>[key]>;
+  }>
 >;
 
-export interface Router<TRoutes extends Route[]> {
+export interface Router<TRoutes extends RouteMap> {
   matchRoutes<TPath extends PathsOf<TRoutes>>(
     path: TPath,
     location: Location
-  ): Match<TRoutes, TPath>;
-  matchRoutes(location: Location): Match<TRoutes, PathsOf<TRoutes>>;
+  ): ToRouteMatch<Match<TRoutes, TPath>>;
+  matchRoutes(location: Location): ToRouteMatch<Match<TRoutes, PathsOf<TRoutes>>>;
   getParams<TPath extends PathsOf<TRoutes>>(
     path: TPath,
     location: Location
@@ -179,11 +159,11 @@ type MaybeUnion<T extends Record<string, any>, U extends Record<string, any>> =
   [key in keyof U]: key extends keyof T ? T[key] | U[key] : U[key];
 };
 
-type MapRoute<TRoute extends Route, TParents extends Route[] = []> = MaybeUnion<
+type MapRoute<TRoute extends RouteWithPath, TParents extends RouteWithPath[] = []> = MaybeUnion<
   {
-    [key in TRoute['path']]: TRoute & { parents: TParents };
+    [key in TRoute['path']]: [...TParents, TRoute];
   },
-  TRoute extends { children: Route[] }
+  TRoute extends { children: RouteMap }
     ? MaybeUnion<
         MapRoutes<TRoute['children'], [...TParents, TRoute]>,
         {
@@ -195,107 +175,41 @@ type MapRoute<TRoute extends Route, TParents extends Route[] = []> = MaybeUnion<
     : {}
 >;
 
-type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
-  ? MapRoute<TRoutes[0], TParents>
-  : TRoutes extends [Route, Route]
-  ? MapRoute<TRoutes[0], TParents> & MapRoute<TRoutes[1], TParents>
-  : TRoutes extends [Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> & MapRoute<TRoutes[1], TParents> & MapRoute<TRoutes[2], TParents>
-  : TRoutes extends [Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents> &
-      MapRoute<TRoutes[7], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents> &
-      MapRoute<TRoutes[7], TParents> &
-      MapRoute<TRoutes[8], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents> &
-      MapRoute<TRoutes[8], TParents> &
-      MapRoute<TRoutes[7], TParents> &
-      MapRoute<TRoutes[9], TParents>
-  : TRoutes extends [Route, Route, Route, Route, Route, Route, Route, Route, Route, Route, Route]
-  ? MapRoute<TRoutes[0], TParents> &
-      MapRoute<TRoutes[1], TParents> &
-      MapRoute<TRoutes[2], TParents> &
-      MapRoute<TRoutes[3], TParents> &
-      MapRoute<TRoutes[4], TParents> &
-      MapRoute<TRoutes[5], TParents> &
-      MapRoute<TRoutes[6], TParents> &
-      MapRoute<TRoutes[8], TParents> &
-      MapRoute<TRoutes[7], TParents> &
-      MapRoute<TRoutes[9], TParents> &
-      MapRoute<TRoutes[10], TParents>
-  : {};
+type FromRouteMap<
+  TRouteMap extends RouteMap,
+  TParents extends RouteWithPath[] = []
+> = UnionToIntersection<
+  ValuesType<{
+    [key in keyof TRouteMap]: MapRoute<TRouteMap[key] & { path: key & string }, TParents>;
+  }>
+>;
+
+type MapRoutes<TRouteMap extends RouteMap, TParents extends RouteWithPath[] = []> = FromRouteMap<
+  TRouteMap,
+  TParents
+> extends Record<string, Route[]>
+  ? FromRouteMap<TRouteMap, TParents>
+  : never;
 
 // const element = null as any;
 
-// const routes = unconst([
-//   {
-//     path: '/link-to/transaction/{transactionId}',
+// const routes = {
+//   '/link-to/transaction/{transactionId}': {
 //     element,
 //   },
-//   {
-//     path: '/link-to/trace/{traceId}',
+//   '/link-to/trace/{traceId}': {
 //     element,
 //   },
-//   {
-//     path: '/',
+//   '/': {
 //     element,
-//     children: [
-//       {
-//         path: '/settings',
+//     children: {
+//       '/settings': {
 //         element,
-//         children: [
-//           {
-//             path: '/settings/agent-configuration',
+//         children: {
+//           '/settings/agent-configuration': {
 //             element,
 //           },
-//           {
-//             path: '/settings/agent-configuration/create',
+//           '/settings/agent-configuration/create': {
 //             element,
 //             params: t.partial({
 //               query: t.partial({
@@ -303,8 +217,7 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //               }),
 //             }),
 //           },
-//           {
-//             path: '/settings/agent-configuration/edit',
+//           '/settings/agent-configuration/edit': {
 //             element,
 //             params: t.partial({
 //               query: t.partial({
@@ -312,34 +225,27 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //               }),
 //             }),
 //           },
-//           {
-//             path: '/settings/apm-indices',
+//           '/settings/apm-indices': {
 //             element,
 //           },
-//           {
-//             path: '/settings/custom-links',
+//           '/settings/custom-links': {
 //             element,
 //           },
-//           {
-//             path: '/settings/schema',
+//           '/settings/schema': {
 //             element,
 //           },
-//           {
-//             path: '/settings/anomaly-detection',
+//           '/settings/anomaly-detection': {
 //             element,
 //           },
-//           {
-//             path: '/settings/agent-keys',
+//           '/settings/agent-keys': {
 //             element,
 //           },
-//           {
-//             path: '/settings',
+//           '/settings': {
 //             element,
 //           },
-//         ],
+//         },
 //       },
-//       {
-//         path: '/services/:serviceName',
+//       '/services/:serviceName': {
 //         element,
 //         params: t.intersection([
 //           t.type({
@@ -360,29 +266,23 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //             }),
 //           }),
 //         ]),
-//         children: [
-//           {
-//             path: '/services/:serviceName/overview',
+//         children: {
+//           '/services/:serviceName/overview': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/transactions',
+//           '/services/:serviceName/transactions': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/transactions/view',
+//           '/services/:serviceName/transactions/view': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/dependencies',
+//           '/services/:serviceName/dependencies': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/errors',
+//           '/services/:serviceName/errors': {
 //             element,
-//             children: [
-//               {
-//                 path: '/services/:serviceName/errors/:groupId',
+//             children: {
+//               '/services/:serviceName/errors/:groupId': {
 //                 element,
 //                 params: t.type({
 //                   path: t.type({
@@ -390,8 +290,7 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //                   }),
 //                 }),
 //               },
-//               {
-//                 path: '/services/:serviceName/errors',
+//               '/services/:serviceName/errors': {
 //                 element,
 //                 params: t.partial({
 //                   query: t.partial({
@@ -402,46 +301,37 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //                   }),
 //                 }),
 //               },
-//             ],
+//             },
 //           },
-//           {
-//             path: '/services/:serviceName/metrics',
+//           '/services/:serviceName/metrics': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/nodes',
+//           '/services/:serviceName/nodes': {
 //             element,
-//             children: [
-//               {
-//                 path: '/services/{serviceName}/nodes/{serviceNodeName}/metrics',
+//             children: {
+//               '/services/{serviceName}/nodes/{serviceNodeName}/metrics': {
 //                 element,
 //               },
-//               {
-//                 path: '/services/:serviceName/nodes',
+//               '/services/:serviceName/nodes': {
 //                 element,
 //               },
-//             ],
+//             },
 //           },
-//           {
-//             path: '/services/:serviceName/service-map',
+//           '/services/:serviceName/service-map': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/logs',
+//           '/services/:serviceName/logs': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName/profiling',
+//           '/services/:serviceName/profiling': {
 //             element,
 //           },
-//           {
-//             path: '/services/:serviceName',
+//           '/services/:serviceName': {
 //             element,
 //           },
-//         ],
+//         },
 //       },
-//       {
-//         path: '/',
+//       '/': {
 //         element,
 //         params: t.partial({
 //           query: t.partial({
@@ -449,55 +339,47 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //             rangeTo: t.string,
 //           }),
 //         }),
-//         children: [
-//           {
-//             path: '/services',
+//         children: {
+//           '/services': {
 //             element,
 //           },
-//           {
-//             path: '/traces',
+//           '/traces': {
 //             element,
 //           },
-//           {
-//             path: '/service-map',
+//           '/service-map': {
 //             element,
 //           },
-//           {
-//             path: '/backends',
+//           '/backends': {
 //             element,
-//             children: [
-//               {
-//                 path: '/backends/{backendName}/overview',
+//             children: {
+//               '/backends/{backendName}/overview': {
 //                 element,
 //               },
-//               {
-//                 path: '/backends/overview',
+//               '/backends/overview': {
 //                 element,
 //               },
-//               {
-//                 path: '/backends',
+//               '/backends': {
 //                 element,
 //               },
-//             ],
+//             },
 //           },
-//           {
-//             path: '/',
+//           '/': {
 //             element,
 //           },
-//         ],
+//         },
 //       },
-//     ],
+//     },
 //   },
-// ] as const);
+// };
 
 // type Routes = typeof routes;
 
-// type Mapped = keyof MapRoutes<Routes>;
+// type Mapped = MapRoutes<Routes>;
 // type Paths = PathsOf<Routes>;
 
-// type Bar = ValuesType<Match<Routes, '/*'>>['route']['path'];
+// type Bar = Match<Routes, '/*'>;
 // type Foo = OutputOf<Routes, '/*'>;
-// // type Baz = OutputOf<Routes, '/services/:serviceName/errors'>;
+// type Baz = OutputOf<Routes, '/services/:serviceName/errors'>;
 
 // const { path }: Foo = {} as any;
 
@@ -505,4 +387,7 @@ type MapRoutes<TRoutes, TParents extends Route[] = []> = TRoutes extends [Route]
 //   return {} as any;
 // }
 
-// // const params = _useApmParams('/services/:serviceName/nodes/*');
+// const {
+//   path: { serviceName },
+//   query: { comparisonType },
+// } = _useApmParams('/services/:serviceName/nodes/*');
diff --git a/packages/kbn-typed-react-router-config/src/unconst.ts b/packages/kbn-typed-react-router-config/src/unconst.ts
deleted file mode 100644
index d10c8290e20e9..0000000000000
--- a/packages/kbn-typed-react-router-config/src/unconst.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-import * as t from 'io-ts';
-import { DeepReadonly } from 'utility-types';
-
-export type MaybeConst<TObject extends object | [object]> = TObject extends [object]
-  ? [DeepReadonly<TObject> | TObject]
-  : TObject extends [object, ...infer TTail]
-  ? [DeepReadonly<TObject> | TObject, ...(TTail extends object[] ? MaybeConst<TTail> : [])]
-  : TObject extends object[]
-  ? DeepReadonly<TObject>
-  : TObject extends object
-  ? [DeepReadonly<TObject> | TObject]
-  : [];
-
-export type Unconst<T> = T extends React.ReactElement
-  ? React.ReactElement<any, any>
-  : T extends t.Type<any>
-  ? T
-  : T extends readonly [any]
-  ? [Unconst<T[0]>]
-  : T extends readonly [any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>]
-  : T extends readonly [any, any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>, Unconst<T[2]>]
-  : T extends readonly [any, any, any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>, Unconst<T[2]>, Unconst<T[3]>]
-  : T extends readonly [any, any, any, any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>, Unconst<T[2]>, Unconst<T[3]>, Unconst<T[4]>]
-  : T extends readonly [any, any, any, any, any, any]
-  ? [Unconst<T[0]>, Unconst<T[1]>, Unconst<T[2]>, Unconst<T[3]>, Unconst<T[4]>, Unconst<T[5]>]
-  : T extends readonly [any, any, any, any, any, any, any]
-  ? [
-      Unconst<T[0]>,
-      Unconst<T[1]>,
-      Unconst<T[2]>,
-      Unconst<T[3]>,
-      Unconst<T[4]>,
-      Unconst<T[5]>,
-      Unconst<T[6]>
-    ]
-  : T extends readonly [any, any, any, any, any, any, any, any]
-  ? [
-      Unconst<T[0]>,
-      Unconst<T[1]>,
-      Unconst<T[2]>,
-      Unconst<T[3]>,
-      Unconst<T[4]>,
-      Unconst<T[5]>,
-      Unconst<T[6]>,
-      Unconst<T[7]>
-    ]
-  : T extends readonly [any, any, any, any, any, any, any, any, any]
-  ? [
-      Unconst<T[0]>,
-      Unconst<T[1]>,
-      Unconst<T[2]>,
-      Unconst<T[3]>,
-      Unconst<T[4]>,
-      Unconst<T[5]>,
-      Unconst<T[6]>,
-      Unconst<T[7]>,
-      Unconst<T[8]>
-    ]
-  : T extends readonly [any, any, any, any, any, any, any, any, any, any]
-  ? [
-      Unconst<T[0]>,
-      Unconst<T[1]>,
-      Unconst<T[2]>,
-      Unconst<T[3]>,
-      Unconst<T[4]>,
-      Unconst<T[5]>,
-      Unconst<T[6]>,
-      Unconst<T[7]>,
-      Unconst<T[8]>,
-      Unconst<T[9]>
-    ]
-  : T extends readonly [infer U, ...infer V]
-  ? [Unconst<U>, ...Unconst<V>]
-  : T extends Record<any, any>
-  ? { -readonly [key in keyof T]: Unconst<T[key]> }
-  : T;
-
-export function unconst<T>(value: T): Unconst<T> {
-  return value as Unconst<T>;
-}
diff --git a/packages/kbn-typed-react-router-config/src/use_router.tsx b/packages/kbn-typed-react-router-config/src/use_router.tsx
index c78e85650f26d..f3a6c396d37d4 100644
--- a/packages/kbn-typed-react-router-config/src/use_router.tsx
+++ b/packages/kbn-typed-react-router-config/src/use_router.tsx
@@ -7,19 +7,19 @@
  */
 
 import React, { createContext, useContext } from 'react';
-import { Route, Router } from './types';
+import { RouteMap, Router } from './types';
 
-const RouterContext = createContext<Router<Route[]> | undefined>(undefined);
+const RouterContext = createContext<Router<RouteMap> | undefined>(undefined);
 
 export const RouterContextProvider = ({
   router,
   children,
 }: {
-  router: Router<Route[]>;
+  router: Router<RouteMap>;
   children: React.ReactNode;
 }) => <RouterContext.Provider value={router}>{children}</RouterContext.Provider>;
 
-export function useRouter(): Router<Route[]> {
+export function useRouter(): Router<RouteMap> {
   const router = useContext(RouterContext);
 
   if (!router) {
diff --git a/x-pack/plugins/apm/public/application/uxApp.tsx b/x-pack/plugins/apm/public/application/uxApp.tsx
index fa29f04fccbad..f9883ca348c51 100644
--- a/x-pack/plugins/apm/public/application/uxApp.tsx
+++ b/x-pack/plugins/apm/public/application/uxApp.tsx
@@ -90,7 +90,7 @@ function UxApp() {
   );
 }
 
-const uxRouter = createRouter([]);
+const uxRouter = createRouter({});
 
 export function UXAppRoot({
   appMountParameters,
diff --git a/x-pack/plugins/apm/public/components/app/backend_inventory/index.tsx b/x-pack/plugins/apm/public/components/app/backend_inventory/index.tsx
index 433d187bda0b3..f749927826231 100644
--- a/x-pack/plugins/apm/public/components/app/backend_inventory/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_inventory/index.tsx
@@ -19,7 +19,6 @@ export function BackendInventory() {
   const {
     query: { environment },
   } = useApmParams('/backends');
-
   const kueryBarBoolFilter = getKueryBarBoolFilter({
     environment,
   });
diff --git a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
index 7e6ee849fdb0b..daab3003b18dc 100644
--- a/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
+++ b/x-pack/plugins/apm/public/components/routing/apm_route_config.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { createRouter, Outlet, route } from '@kbn/typed-react-router-config';
+import { createRouter, Outlet } from '@kbn/typed-react-router-config';
 import * as t from 'io-ts';
 import React from 'react';
 import { Breadcrumb } from '../app/breadcrumb';
@@ -19,9 +19,8 @@ import { settings } from './settings';
  * The array of route definitions to be used when the application
  * creates the routes.
  */
-const apmRoutes = route([
-  {
-    path: '/link-to/transaction/{transactionId}',
+const apmRoutes = {
+  '/link-to/transaction/{transactionId}': {
     element: <TransactionLink />,
     params: t.intersection([
       t.type({
@@ -37,8 +36,7 @@ const apmRoutes = route([
       }),
     ]),
   },
-  {
-    path: '/link-to/trace/{traceId}',
+  '/link-to/trace/{traceId}': {
     element: <TraceLink />,
     params: t.intersection([
       t.type({
@@ -54,16 +52,19 @@ const apmRoutes = route([
       }),
     ]),
   },
-  {
-    path: '/',
+  '/': {
     element: (
       <Breadcrumb title="APM" href="/">
         <Outlet />
       </Breadcrumb>
     ),
-    children: [settings, serviceDetail, home],
+    children: {
+      ...settings,
+      ...serviceDetail,
+      ...home,
+    },
   },
-] as const);
+};
 
 export type ApmRoutes = typeof apmRoutes;
 
diff --git a/x-pack/plugins/apm/public/components/routing/home/index.tsx b/x-pack/plugins/apm/public/components/routing/home/index.tsx
index 25a68592d2b11..efde391467dfd 100644
--- a/x-pack/plugins/apm/public/components/routing/home/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/home/index.tsx
@@ -30,15 +30,26 @@ function page<TPath extends string>({
   path: TPath;
   element: React.ReactElement<any, any>;
   title: string;
-}): { path: TPath; element: React.ReactElement<any, any> } {
+}): Record<
+  TPath,
+  {
+    element: React.ReactElement<any, any>;
+  }
+> {
   return {
-    path,
-    element: (
-      <Breadcrumb title={title} href={path}>
-        <ApmMainTemplate pageTitle={title}>{element}</ApmMainTemplate>
-      </Breadcrumb>
-    ),
-  };
+    [path]: {
+      element: (
+        <Breadcrumb title={title} href={path}>
+          <ApmMainTemplate pageTitle={title}>{element}</ApmMainTemplate>
+        </Breadcrumb>
+      ),
+    },
+  } as Record<
+    TPath,
+    {
+      element: React.ReactElement<any, any>;
+    }
+  >;
 }
 
 export const ServiceInventoryTitle = i18n.translate(
@@ -56,88 +67,85 @@ export const DependenciesInventoryTitle = i18n.translate(
 );
 
 export const home = {
-  path: '/',
-  element: <Outlet />,
-  params: t.type({
-    query: t.intersection([
-      environmentRt,
-      t.type({
-        rangeFrom: t.string,
-        rangeTo: t.string,
-        kuery: t.string,
-      }),
-      t.partial({
-        refreshPaused: t.union([t.literal('true'), t.literal('false')]),
-        refreshInterval: t.string,
-        comparisonEnabled: toBooleanRt,
-        comparisonType: comparisonTypeRt,
-      }),
-    ]),
-  }),
-  defaults: {
-    query: {
-      environment: ENVIRONMENT_ALL.value,
-      kuery: '',
-    },
-  },
-  children: [
-    page({
-      path: '/services',
-      title: ServiceInventoryTitle,
-      element: <ServiceInventory />,
+  '/': {
+    element: <Outlet />,
+    params: t.type({
+      query: t.intersection([
+        environmentRt,
+        t.type({
+          rangeFrom: t.string,
+          rangeTo: t.string,
+          kuery: t.string,
+        }),
+        t.partial({
+          refreshPaused: t.union([t.literal('true'), t.literal('false')]),
+          refreshInterval: t.string,
+          comparisonEnabled: toBooleanRt,
+          comparisonType: comparisonTypeRt,
+        }),
+      ]),
     }),
-    page({
-      path: '/traces',
-      title: i18n.translate('xpack.apm.views.traceOverview.title', {
-        defaultMessage: 'Traces',
+    defaults: {
+      query: {
+        environment: ENVIRONMENT_ALL.value,
+        kuery: '',
+      },
+    },
+    children: {
+      ...page({
+        path: '/services',
+        title: ServiceInventoryTitle,
+        element: <ServiceInventory />,
       }),
-      element: <TraceOverview />,
-    }),
-    page({
-      path: '/service-map',
-      title: i18n.translate('xpack.apm.views.serviceMap.title', {
-        defaultMessage: 'Service Map',
+      ...page({
+        path: '/traces',
+        title: i18n.translate('xpack.apm.views.traceOverview.title', {
+          defaultMessage: 'Traces',
+        }),
+        element: <TraceOverview />,
       }),
-      element: <ServiceMapHome />,
-    }),
-    {
-      path: '/backends',
-      element: <Outlet />,
-      params: t.partial({
-        query: t.partial({
-          comparisonEnabled: toBooleanRt,
-          comparisonType: comparisonTypeRt,
+      ...page({
+        path: '/service-map',
+        title: i18n.translate('xpack.apm.views.serviceMap.title', {
+          defaultMessage: 'Service Map',
         }),
+        element: <ServiceMapHome />,
       }),
-      children: [
-        {
-          path: '/backends/{backendName}/overview',
-          element: <RedirectToBackendOverviewRouteView />,
-          params: t.type({
-            path: t.type({
-              backendName: t.string,
-            }),
+      '/backends': {
+        element: <Outlet />,
+        params: t.partial({
+          query: t.partial({
+            comparisonEnabled: toBooleanRt,
+            comparisonType: comparisonTypeRt,
           }),
-        },
-        {
-          path: '/backends/overview',
-          element: <BackendDetailOverview />,
-          params: t.type({
-            query: t.type({
-              backendName: t.string,
+        }),
+        children: {
+          '/backends/{backendName}/overview': {
+            element: <RedirectToBackendOverviewRouteView />,
+            params: t.type({
+              path: t.type({
+                backendName: t.string,
+              }),
+            }),
+          },
+          '/backends/overview': {
+            element: <BackendDetailOverview />,
+            params: t.type({
+              query: t.type({
+                backendName: t.string,
+              }),
             }),
+          },
+          ...page({
+            path: '/backends',
+            title: DependenciesInventoryTitle,
+            element: <BackendInventory />,
           }),
         },
-        page({
-          path: '/backends',
-          title: DependenciesInventoryTitle,
-          element: <BackendInventory />,
-        }),
-      ],
+      },
+      '/': {
+        element: <RedirectTo pathname="/services" />,
+      },
     },
-    {
-      path: '/',
-      element: <RedirectTo pathname="/services" />,
-    },
-  ],
-} as const;
+  },
+};
diff --git a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
index f8206f273abd4..6514c8288be0e 100644
--- a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
@@ -29,14 +29,12 @@ import { ServiceDependencies } from '../../app/service_dependencies';
 import { ServiceLogs } from '../../app/service_logs';
 import { InfraOverview } from '../../app/infra_overview';
 
-function page<TPath extends string>({
-  path,
+function page({
   title,
   tab,
   element,
   searchBarOptions,
 }: {
-  path: TPath;
   title: string;
   tab: React.ComponentProps<typeof ApmServiceTemplate>['selectedTab'];
   element: React.ReactElement<any, any>;
@@ -48,10 +46,8 @@ function page<TPath extends string>({
   };
 }): {
   element: React.ReactElement<any, any>;
-  path: TPath;
 } {
   return {
-    path,
     element: (
       <ApmServiceTemplate
         title={title}
@@ -61,225 +57,209 @@ function page<TPath extends string>({
         {element}
       </ApmServiceTemplate>
     ),
-  } as any;
+  };
 }
 
 export const serviceDetail = {
-  path: '/services/{serviceName}',
-  element: <ApmServiceWrapper />,
-  params: t.intersection([
-    t.type({
-      path: t.type({
-        serviceName: t.string,
-      }),
-    }),
-    t.type({
-      query: t.intersection([
-        environmentRt,
-        t.type({
-          rangeFrom: t.string,
-          rangeTo: t.string,
-          kuery: t.string,
-        }),
-        t.partial({
-          comparisonEnabled: toBooleanRt,
-          comparisonType: comparisonTypeRt,
-          latencyAggregationType: t.string,
-          transactionType: t.string,
-          refreshPaused: t.union([t.literal('true'), t.literal('false')]),
-          refreshInterval: t.string,
+  '/services/{serviceName}': {
+    element: <ApmServiceWrapper />,
+    params: t.intersection([
+      t.type({
+        path: t.type({
+          serviceName: t.string,
         }),
-      ]),
-    }),
-  ]),
-  defaults: {
-    query: {
-      kuery: '',
-      environment: ENVIRONMENT_ALL.value,
-    },
-  },
-  children: [
-    page({
-      path: '/services/{serviceName}/overview',
-      element: <ServiceOverview />,
-      tab: 'overview',
-      title: i18n.translate('xpack.apm.views.overview.title', {
-        defaultMessage: 'Overview',
       }),
-      searchBarOptions: {
-        showTransactionTypeSelector: true,
-        showTimeComparison: true,
+      t.type({
+        query: t.intersection([
+          environmentRt,
+          t.type({
+            rangeFrom: t.string,
+            rangeTo: t.string,
+            kuery: t.string,
+          }),
+          t.partial({
+            comparisonEnabled: toBooleanRt,
+            comparisonType: comparisonTypeRt,
+            latencyAggregationType: t.string,
+            transactionType: t.string,
+            refreshPaused: t.union([t.literal('true'), t.literal('false')]),
+            refreshInterval: t.string,
+          }),
+        ]),
+      }),
+    ]),
+    defaults: {
+      query: {
+        kuery: '',
+        environment: ENVIRONMENT_ALL.value,
       },
-    }),
-    {
-      ...page({
-        path: '/services/{serviceName}/transactions',
-        tab: 'transactions',
-        title: i18n.translate('xpack.apm.views.transactions.title', {
-          defaultMessage: 'Transactions',
+    },
+    children: {
+      '/services/{serviceName}/overview': page({
+        element: <ServiceOverview />,
+        tab: 'overview',
+        title: i18n.translate('xpack.apm.views.overview.title', {
+          defaultMessage: 'Overview',
         }),
-        element: <Outlet />,
         searchBarOptions: {
           showTransactionTypeSelector: true,
           showTimeComparison: true,
         },
       }),
-      children: [
-        {
-          path: '/services/{serviceName}/transactions/view',
-          element: <TransactionDetails />,
-          params: t.type({
-            query: t.intersection([
-              t.type({
-                transactionName: t.string,
-              }),
-              t.partial({
-                traceId: t.string,
-                transactionId: t.string,
-                comparisonEnabled: toBooleanRt,
-                comparisonType: comparisonTypeRt,
-              }),
-            ]),
+      '/services/{serviceName}/transactions': {
+        ...page({
+          tab: 'transactions',
+          title: i18n.translate('xpack.apm.views.transactions.title', {
+            defaultMessage: 'Transactions',
           }),
+          element: <Outlet />,
+          searchBarOptions: {
+            showTransactionTypeSelector: true,
+            showTimeComparison: true,
+          },
+        }),
+        children: {
+          '/services/{serviceName}/transactions/view': {
+            element: <TransactionDetails />,
+            params: t.type({
+              query: t.intersection([
+                t.type({
+                  transactionName: t.string,
+                }),
+                t.partial({
+                  traceId: t.string,
+                  transactionId: t.string,
+                  comparisonEnabled: toBooleanRt,
+                  comparisonType: comparisonTypeRt,
+                }),
+              ]),
+            }),
+          },
+          '/services/{serviceName}/transactions': {
+            element: <TransactionOverview />,
+          },
         },
-        {
-          path: '/services/{serviceName}/transactions',
-          element: <TransactionOverview />,
-        },
-      ],
-    },
-    page({
-      path: '/services/{serviceName}/dependencies',
-      element: <ServiceDependencies />,
-      tab: 'dependencies',
-      title: i18n.translate('xpack.apm.views.dependencies.title', {
-        defaultMessage: 'Dependencies',
-      }),
-      searchBarOptions: {
-        showTimeComparison: true,
       },
-    }),
-    {
-      ...page({
-        path: '/services/{serviceName}/errors',
-        tab: 'errors',
-        title: i18n.translate('xpack.apm.views.errors.title', {
-          defaultMessage: 'Errors',
+      '/services/{serviceName}/dependencies': page({
+        element: <ServiceDependencies />,
+        tab: 'dependencies',
+        title: i18n.translate('xpack.apm.views.dependencies.title', {
+          defaultMessage: 'Dependencies',
         }),
-        element: <Outlet />,
         searchBarOptions: {
           showTimeComparison: true,
         },
       }),
-      params: t.partial({
-        query: t.partial({
-          sortDirection: t.string,
-          sortField: t.string,
-          pageSize: t.string,
-          page: t.string,
+      '/services/{serviceName}/errors': {
+        ...page({
+          tab: 'errors',
+          title: i18n.translate('xpack.apm.views.errors.title', {
+            defaultMessage: 'Errors',
+          }),
+          element: <Outlet />,
+          searchBarOptions: {
+            showTimeComparison: true,
+          },
         }),
-      }),
-      children: [
-        {
-          path: '/services/{serviceName}/errors/{groupId}',
-          element: <ErrorGroupDetails />,
-          params: t.type({
-            path: t.type({
-              groupId: t.string,
-            }),
+        params: t.partial({
+          query: t.partial({
+            sortDirection: t.string,
+            sortField: t.string,
+            pageSize: t.string,
+            page: t.string,
           }),
+        }),
+        children: {
+          '/services/{serviceName}/errors/{groupId}': {
+            element: <ErrorGroupDetails />,
+            params: t.type({
+              path: t.type({
+                groupId: t.string,
+              }),
+            }),
+          },
+          '/services/{serviceName}/errors': {
+            element: <ErrorGroupOverview />,
+          },
         },
-        {
-          path: '/services/{serviceName}/errors',
-          element: <ErrorGroupOverview />,
-        },
-      ],
-    },
-    page({
-      path: '/services/{serviceName}/metrics',
-      tab: 'metrics',
-      title: i18n.translate('xpack.apm.views.metrics.title', {
-        defaultMessage: 'Metrics',
-      }),
-      element: <ServiceMetrics />,
-    }),
-    {
-      ...page({
-        path: '/services/{serviceName}/nodes',
-        tab: 'nodes',
-        title: i18n.translate('xpack.apm.views.nodes.title', {
-          defaultMessage: 'JVMs',
+      },
+      '/services/{serviceName}/metrics': page({
+        tab: 'metrics',
+        title: i18n.translate('xpack.apm.views.metrics.title', {
+          defaultMessage: 'Metrics',
         }),
-        element: <Outlet />,
+        element: <ServiceMetrics />,
       }),
-      children: [
-        {
-          path: '/services/{serviceName}/nodes/{serviceNodeName}/metrics',
-          element: <ServiceNodeMetrics />,
-          params: t.type({
-            path: t.type({
-              serviceNodeName: t.string,
-            }),
+      '/services/{serviceName}/nodes': {
+        ...page({
+          tab: 'nodes',
+          title: i18n.translate('xpack.apm.views.nodes.title', {
+            defaultMessage: 'JVMs',
           }),
-        },
-        {
-          path: '/services/{serviceName}/nodes',
-          element: <ServiceNodeOverview />,
-          params: t.partial({
-            query: t.partial({
-              sortDirection: t.string,
-              sortField: t.string,
-              pageSize: t.string,
-              page: t.string,
+          element: <Outlet />,
+        }),
+        children: {
+          '/services/{serviceName}/nodes/{serviceNodeName}/metrics': {
+            element: <ServiceNodeMetrics />,
+            params: t.type({
+              path: t.type({
+                serviceNodeName: t.string,
+              }),
             }),
-          }),
+          },
+          '/services/{serviceName}/nodes': {
+            element: <ServiceNodeOverview />,
+            params: t.partial({
+              query: t.partial({
+                sortDirection: t.string,
+                sortField: t.string,
+                pageSize: t.string,
+                page: t.string,
+              }),
+            }),
+          },
         },
-      ],
-    },
-    page({
-      path: '/services/{serviceName}/service-map',
-      tab: 'service-map',
-      title: i18n.translate('xpack.apm.views.serviceMap.title', {
-        defaultMessage: 'Service Map',
-      }),
-      element: <ServiceMapServiceDetail />,
-      searchBarOptions: {
-        hidden: true,
       },
-    }),
-    page({
-      path: '/services/{serviceName}/logs',
-      tab: 'logs',
-      title: i18n.translate('xpack.apm.views.logs.title', {
-        defaultMessage: 'Logs',
+      '/services/{serviceName}/service-map': page({
+        tab: 'service-map',
+        title: i18n.translate('xpack.apm.views.serviceMap.title', {
+          defaultMessage: 'Service Map',
+        }),
+        element: <ServiceMapServiceDetail />,
+        searchBarOptions: {
+          hidden: true,
+        },
       }),
-      element: <ServiceLogs />,
-      searchBarOptions: {
-        showKueryBar: false,
-      },
-    }),
-    page({
-      path: '/services/{serviceName}/profiling',
-      tab: 'profiling',
-      title: i18n.translate('xpack.apm.views.serviceProfiling.title', {
-        defaultMessage: 'Profiling',
+      '/services/{serviceName}/logs': page({
+        tab: 'logs',
+        title: i18n.translate('xpack.apm.views.logs.title', {
+          defaultMessage: 'Logs',
+        }),
+        element: <ServiceLogs />,
+        searchBarOptions: {
+          showKueryBar: false,
+        },
       }),
-      element: <ServiceProfiling />,
-    }),
-    page({
-      path: '/services/{serviceName}/infra',
-      tab: 'infra',
-      title: i18n.translate('xpack.apm.views.infra.title', {
-        defaultMessage: 'Infrastructure',
+      '/services/{serviceName}/profiling': page({
+        tab: 'profiling',
+        title: i18n.translate('xpack.apm.views.serviceProfiling.title', {
+          defaultMessage: 'Profiling',
+        }),
+        element: <ServiceProfiling />,
+      }),
+      '/services/{serviceName}/infra': page({
+        tab: 'infra',
+        title: i18n.translate('xpack.apm.views.infra.title', {
+          defaultMessage: 'Infrastructure',
+        }),
+        element: <InfraOverview />,
+        searchBarOptions: {
+          hidden: true,
+        },
       }),
-      element: <InfraOverview />,
-      searchBarOptions: {
-        hidden: true,
+      '/services/{serviceName}/': {
+        element: <RedirectToDefaultServiceRouteView />,
       },
-    }),
-    {
-      path: '/services/{serviceName}/',
-      element: <RedirectToDefaultServiceRouteView />,
     },
-  ],
-} as const;
+  },
+};
diff --git a/x-pack/plugins/apm/public/components/routing/settings/index.tsx b/x-pack/plugins/apm/public/components/routing/settings/index.tsx
index afeef9c496d25..97748f2ce13ba 100644
--- a/x-pack/plugins/apm/public/components/routing/settings/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/settings/index.tsx
@@ -21,129 +21,120 @@ import { Schema } from '../../app/Settings/schema';
 import { AnomalyDetection } from '../../app/Settings/anomaly_detection';
 import { AgentKeys } from '../../app/Settings/agent_keys';
 
-function page<TPath extends string>({
-  path,
+function page({
   title,
   tab,
   element,
 }: {
-  path: TPath;
   title: string;
   tab: React.ComponentProps<typeof SettingsTemplate>['selectedTab'];
   element: React.ReactElement;
 }): {
   element: React.ReactElement;
-  path: TPath;
 } {
   return {
-    path,
     element: (
-      <Breadcrumb title={title} href={`/settings${path}`}>
+      <Breadcrumb title={title} href={`/settings/${tab}`}>
         <SettingsTemplate selectedTab={tab}>{element}</SettingsTemplate>
       </Breadcrumb>
     ),
-  } as any;
+  };
 }
 
 export const settings = {
-  path: '/settings',
-  element: (
-    <Breadcrumb
-      href="/settings"
-      title={i18n.translate('xpack.apm.views.listSettings.title', {
-        defaultMessage: 'Settings',
-      })}
-    >
-      <Outlet />
-    </Breadcrumb>
-  ),
-  children: [
-    page({
-      path: '/settings/agent-configuration',
-      tab: 'agent-configurations',
-      title: i18n.translate(
-        'xpack.apm.views.settings.agentConfiguration.title',
-        { defaultMessage: 'Agent Configuration' }
-      ),
-      element: <AgentConfigurations />,
-    }),
-    {
-      ...page({
-        path: '/settings/agent-configuration/create',
+  '/settings': {
+    element: (
+      <Breadcrumb
+        href="/settings"
+        title={i18n.translate('xpack.apm.views.listSettings.title', {
+          defaultMessage: 'Settings',
+        })}
+      >
+        <Outlet />
+      </Breadcrumb>
+    ),
+    children: {
+      '/settings/agent-configuration': page({
+        tab: 'agent-configuration',
         title: i18n.translate(
-          'xpack.apm.views.settings.createAgentConfiguration.title',
-          { defaultMessage: 'Create Agent Configuration' }
+          'xpack.apm.views.settings.agentConfiguration.title',
+          { defaultMessage: 'Agent Configuration' }
         ),
-        tab: 'agent-configurations',
-        element: <CreateAgentConfigurationRouteView />,
+        element: <AgentConfigurations />,
       }),
-      params: t.partial({
-        query: t.partial({
-          pageStep: agentConfigurationPageStepRt,
+      '/settings/agent-configuration/create': {
+        ...page({
+          title: i18n.translate(
+            'xpack.apm.views.settings.createAgentConfiguration.title',
+            { defaultMessage: 'Create Agent Configuration' }
+          ),
+          tab: 'agent-configuration',
+          element: <CreateAgentConfigurationRouteView />,
         }),
-      }),
-    },
-    {
-      ...page({
-        path: '/settings/agent-configuration/edit',
-        title: i18n.translate(
-          'xpack.apm.views.settings.editAgentConfiguration.title',
-          { defaultMessage: 'Edit Agent Configuration' }
-        ),
-        tab: 'agent-configurations',
-        element: <EditAgentConfigurationRouteView />,
-      }),
-      params: t.partial({
-        query: t.partial({
-          environment: t.string,
-          name: t.string,
-          pageStep: agentConfigurationPageStepRt,
+        params: t.partial({
+          query: t.partial({
+            pageStep: agentConfigurationPageStepRt,
+          }),
         }),
+      },
+      '/settings/agent-configuration/edit': {
+        ...page({
+          title: i18n.translate(
+            'xpack.apm.views.settings.editAgentConfiguration.title',
+            { defaultMessage: 'Edit Agent Configuration' }
+          ),
+          tab: 'agent-configuration',
+          element: <EditAgentConfigurationRouteView />,
+        }),
+        params: t.partial({
+          query: t.partial({
+            environment: t.string,
+            name: t.string,
+            pageStep: agentConfigurationPageStepRt,
+          }),
+        }),
+      },
+      '/settings/apm-indices': page({
+        title: i18n.translate('xpack.apm.views.settings.indices.title', {
+          defaultMessage: 'Indices',
+        }),
+        tab: 'apm-indices',
+        element: <ApmIndices />,
       }),
-    },
-    page({
-      path: '/settings/apm-indices',
-      title: i18n.translate('xpack.apm.views.settings.indices.title', {
-        defaultMessage: 'Indices',
-      }),
-      tab: 'apm-indices',
-      element: <ApmIndices />,
-    }),
-    page({
-      path: '/settings/custom-links',
-      title: i18n.translate('xpack.apm.views.settings.customLink.title', {
-        defaultMessage: 'Custom Links',
+      '/settings/custom-links': page({
+        title: i18n.translate('xpack.apm.views.settings.customLink.title', {
+          defaultMessage: 'Custom Links',
+        }),
+        tab: 'custom-links',
+        element: <CustomLinkOverview />,
       }),
-      tab: 'custom-links',
-      element: <CustomLinkOverview />,
-    }),
-    page({
-      path: '/settings/schema',
-      title: i18n.translate('xpack.apm.views.settings.schema.title', {
-        defaultMessage: 'Schema',
+      '/settings/schema': page({
+        title: i18n.translate('xpack.apm.views.settings.schema.title', {
+          defaultMessage: 'Schema',
+        }),
+        element: <Schema />,
+        tab: 'schema',
       }),
-      element: <Schema />,
-      tab: 'schema',
-    }),
-    page({
-      path: '/settings/anomaly-detection',
-      title: i18n.translate('xpack.apm.views.settings.anomalyDetection.title', {
-        defaultMessage: 'Anomaly detection',
+      '/settings/anomaly-detection': page({
+        title: i18n.translate(
+          'xpack.apm.views.settings.anomalyDetection.title',
+          {
+            defaultMessage: 'Anomaly detection',
+          }
+        ),
+        element: <AnomalyDetection />,
+        tab: 'anomaly-detection',
       }),
-      element: <AnomalyDetection />,
-      tab: 'anomaly-detection',
-    }),
-    page({
-      path: '/settings/agent-keys',
-      title: i18n.translate('xpack.apm.views.settings.agentKeys.title', {
-        defaultMessage: 'Agent keys',
+      '/settings/agent-keys': page({
+        title: i18n.translate('xpack.apm.views.settings.agentKeys.title', {
+          defaultMessage: 'Agent keys',
+        }),
+        element: <AgentKeys />,
+        tab: 'agent-keys',
       }),
-      element: <AgentKeys />,
-      tab: 'agent-keys',
-    }),
-    {
-      path: '/settings',
-      element: <Redirect to="/settings/agent-configuration" />,
+      '/settings': {
+        element: <Redirect to="/settings/agent-configuration" />,
+      },
     },
-  ],
-} as const;
+  },
+};
diff --git a/x-pack/plugins/apm/public/components/routing/templates/settings_template.stories.tsx b/x-pack/plugins/apm/public/components/routing/templates/settings_template.stories.tsx
index 4fc35bf242a40..a1a5e38bdd2ea 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/settings_template.stories.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/settings_template.stories.tsx
@@ -71,5 +71,5 @@ export const Example: Story<Args> = (args) => {
 };
 Example.args = {
   children: <>test</>,
-  selectedTab: 'agent-configurations',
+  selectedTab: 'agent-configuration',
 };
diff --git a/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
index 43a865c0584c9..08cacc38e89f0 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/settings_template.tsx
@@ -17,7 +17,7 @@ import { getLegacyApmHref } from '../../shared/links/apm/apm_link';
 
 type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
   key:
-    | 'agent-configurations'
+    | 'agent-configuration'
     | 'agent-keys'
     | 'anomaly-detection'
     | 'apm-indices'
@@ -66,7 +66,7 @@ function getTabs({
 
   const tabs: Tab[] = [
     {
-      key: 'agent-configurations',
+      key: 'agent-configuration',
       label: i18n.translate('xpack.apm.settings.agentConfig', {
         defaultMessage: 'Agent Configuration',
       }),
diff --git a/x-pack/plugins/apm/public/hooks/use_apm_params.ts b/x-pack/plugins/apm/public/hooks/use_apm_params.ts
index b4c17c1b329ae..89aca1e4bf1a6 100644
--- a/x-pack/plugins/apm/public/hooks/use_apm_params.ts
+++ b/x-pack/plugins/apm/public/hooks/use_apm_params.ts
@@ -16,17 +16,17 @@ export function useMaybeApmParams<TPath extends PathsOf<ApmRoutes>>(
   path: TPath,
   optional: true
 ): TypeOf<ApmRoutes, TPath> | undefined {
-  return useParams(path, optional);
+  return useParams(path, optional) as TypeOf<ApmRoutes, TPath> | undefined;
 }
 
 export function useApmParams<TPath extends PathsOf<ApmRoutes>>(
   path: TPath
 ): TypeOf<ApmRoutes, TPath> {
-  return useParams(path)!;
+  return useParams(path)! as TypeOf<ApmRoutes, TPath>;
 }
 
 export function useAnyOfApmParams<TPaths extends Array<PathsOf<ApmRoutes>>>(
   ...paths: TPaths
 ): TypeOf<ApmRoutes, ValuesType<TPaths>> {
-  return useParams(...paths)!;
+  return useParams(...paths)! as TypeOf<ApmRoutes, ValuesType<TPaths>>;
 }
diff --git a/x-pack/plugins/apm/public/hooks/use_apm_router.ts b/x-pack/plugins/apm/public/hooks/use_apm_router.ts
index dea66d7b2e1c8..d10b6da857802 100644
--- a/x-pack/plugins/apm/public/hooks/use_apm_router.ts
+++ b/x-pack/plugins/apm/public/hooks/use_apm_router.ts
@@ -14,8 +14,6 @@ export function useApmRouter() {
   const { core } = useApmPluginContext();
 
   const link = (...args: [any]) => {
-    // @ts-expect-error router.link() expects never type, because
-    // no routes are specified. that's okay.
     return core.http.basePath.prepend('/app/apm' + router.link(...args));
   };