Closes #51963.

Whatever you do, don't look at the type definitions.

This PR adds typed client-side routing, by inferring route/path names and their expected path and query parameters.

Here's a demo:

I've profiled some tab switches in the service overview as well. Looks like a lot less stuff happens after this change. Here's the before, where you can see the main thread block for about 600-800ms on every tab switch:

Here's after, where there's almost no thread blocking:

I assume this is because there's less mounting/unmounting happening.

It works as follows:

Defining routes

Routes are defined according to the proposal for object-based routing in react-router@6:

import { createRouter, Outlet, unconst } from '@kbn/typed-react-router-config';

const routes = unconst([
	{
		path: '/',
		element: <Outlet/>,
		children: [
			{
				path: '/services',
				element: <ServiceOverview/>,
				params: t.type({
					query: t.type({
						rangeFrom: t.string,
						rangeTo: t.string
					})
				})
			},
			{
				path: '/services/:serviceName',
				element: <Outlet/>,
				params: t.type({
					path: t.type({
						serviceName: t.string,
					}),
					query: t.type({
						rangeFrom: t.string
					})
				}),
				children: [
					{
						path: '/overview',
						element: <ServiceOverview/>
					},
					{
						path: '/transactions',
						element: <TransactionOverview/>
					}
				]
			}
		]
	}	
] as const);

const and unconst() are necessary to have exact types, without the overhead of having readonly arrays and objects.

Outlet is a component that will render the element of an active route's child element.

Creating a router

The route definition should then be passed to createRouter:

const apmRouter = createRouter(routes);

The router has the following methods:

• link(routePath, params?): returns a link (a string) based on the routePath (which is the path defined in the route, concatenated with its parents). The type of params is based on the found route definition (and its parents), and is guarded by a runtime validation as well.
• matchRoutes(routePath?, location): returns matching routes up until the routePath, if it matches, or all routes if a wildcard is used. If only the location is given, it will return all matching routes.
• getParams(routePath?, location): similar to matchRoutes, but will validate, parse and return all parameters for the matched routes.

Rendering the routes

import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config';
import { apmRouter } from './apm_route_config';

function App ( {}:{ history: History }) {
	
	return <RouterProvider router={apmRouter} history={history}>
		<MyCustomContextProvider>
			<RouteRenderer/>
		</MyCustomContextProvider>
	</RouterProvider>
}

RouterProvider renders a react-router context provider, to ensure its Route components still work, and its own context provider for the router passed to it.

RouteRenderer is the target for rendering the elements of active routes.

Hooks

• useRouter(): returns the router in context

• useParams(routePath): calls and returns router.getParams(routePath) for the router in context

• useMatchRoutes(routePath?, location): calls and returns router.matchRoutes(routePath?, location) for the router in context

• useApmParams(routePath): a typed version of useParams based on apmRouter

• useApmRouter(): a typed version of useRouter based on useParams

Examples

TBD