[shared-ux-router] Add Router and Routes components (#159834)

## Summary

Why?

To simplify the process of migration to react-router@6.
https://github.com/remix-run/react-router/discussions/8753

What problems exactly it solves?

- In my previous PR I added `CompatRouter`
https://github.com/elastic/kibana/pull/159173, which caused changes in
~50 files and pinged 15 Teams. And this is just meant to be a temporary
change, so when we're done with the migration I would have to revert
these changes and engage everyone to review the PR again. And it is just
a single step in the migration strategy. So to make our lives easier I
think it would be better to have a common place where we do import our
router components because it will allow us to surface some extra logic
in single place instead of going through the whole source code again.

- `react-router@6` doesn't support a custom `Route` component, so that
means our custom `Route` component that we're using almost everywhere
today, will need to be replaced by a different solution. I have decided
to add `Routes` component, which will be responsible for rendering the
proper component (`react-router@6` renamed `Switch` to `Routes`, so I
have named this component to align with the dictionary of the new
router) and also is going to add the logic that today is done in `Route`
(moving logic to `Routes` will be done in the follow-up PR, here I just
wanted to focus on using the common router components to make the review
process easier)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

packages/core/application/core-application-browser-internal/src/ui/app_router.tsx

@@ -7,9 +7,8 @@
  */
 
 import React, { FunctionComponent, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports
-import { RouteComponentProps, Router, Route, Switch } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { RouteComponentProps } from 'react-router-dom';
+import { Router, Routes, Route } from '@kbn/shared-ux-router';
 import { History } from 'history';
 import { EMPTY, Observable } from 'rxjs';
 import useObservable from 'react-use/lib/useObservable';
@@ -56,62 +55,60 @@ export const AppRouter: FunctionComponent<Props> = ({
 
   return (
     <Router history={history}>
-      <CompatRouter>
-        <Switch>
-          {[...mounters].map(([appId, mounter]) => (
-            <Route
-              key={mounter.appRoute}
-              path={mounter.appRoute}
-              exact={mounter.exactRoute}
-              render={({ match: { path } }) => (
-                <AppContainer
-                  appPath={path}
-                  appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
-                  createScopedHistory={createScopedHistory}
-                  {...{
-                    appId,
-                    mounter,
-                    setAppLeaveHandler,
-                    setAppActionMenu,
-                    setIsMounting,
-                    theme$,
-                    showPlainSpinner,
-                  }}
-                />
-              )}
-            />
-          ))}
-          {/* handler for legacy apps and used as a catch-all to display 404 page on not existing /app/appId apps*/}
+      <Routes>
+        {[...mounters].map(([appId, mounter]) => (
           <Route
-            path="/app/:appId"
-            render={({
-              match: {
-                params: { appId },
-                url,
-              },
-            }: RouteComponentProps<Params>) => {
-              // the id/mounter retrieval can be removed once #76348 is addressed
-              const [id, mounter] = mounters.has(appId) ? [appId, mounters.get(appId)] : [];
-              return (
-                <AppContainer
-                  appPath={url}
-                  appId={id ?? appId}
-                  appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
-                  createScopedHistory={createScopedHistory}
-                  {...{
-                    mounter,
-                    setAppLeaveHandler,
-                    setAppActionMenu,
-                    setIsMounting,
-                    theme$,
-                    showPlainSpinner,
-                  }}
-                />
-              );
-            }}
+            key={mounter.appRoute}
+            path={mounter.appRoute}
+            exact={mounter.exactRoute}
+            render={({ match: { path } }) => (
+              <AppContainer
+                appPath={path}
+                appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
+                createScopedHistory={createScopedHistory}
+                {...{
+                  appId,
+                  mounter,
+                  setAppLeaveHandler,
+                  setAppActionMenu,
+                  setIsMounting,
+                  theme$,
+                  showPlainSpinner,
+                }}
+              />
+            )}
           />
-        </Switch>
-      </CompatRouter>
+        ))}
+        {/* handler for legacy apps and used as a catch-all to display 404 page on not existing /app/appId apps*/}
+        <Route
+          path="/app/:appId"
+          render={({
+            match: {
+              params: { appId },
+              url,
+            },
+          }: RouteComponentProps<Params>) => {
+            // the id/mounter retrieval can be removed once #76348 is addressed
+            const [id, mounter] = mounters.has(appId) ? [appId, mounters.get(appId)] : [];
+            return (
+              <AppContainer
+                appPath={url}
+                appId={id ?? appId}
+                appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
+                createScopedHistory={createScopedHistory}
+                {...{
+                  mounter,
+                  setAppLeaveHandler,
+                  setAppActionMenu,
+                  setIsMounting,
+                  theme$,
+                  showPlainSpinner,
+                }}
+              />
+            );
+          }}
+        />
+      </Routes>
     </Router>
   );
 };

packages/core/application/core-application-browser-internal/tsconfig.json

@@ -35,6 +35,7 @@
     "@kbn/core-custom-branding-browser-mocks",
     "@kbn/core-analytics-browser-mocks",
     "@kbn/core-analytics-browser",
+    "@kbn/shared-ux-router",
   ],
   "exclude": [
     "target/**/*",