[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>

x-pack/plugins/ux/public/components/app/rum_dashboard/utils/test_helper.tsx

@@ -10,8 +10,7 @@ import { render as testLibRender } from '@testing-library/react';
 import { CoreStart } from '@kbn/core/public';
 import { of } from 'rxjs';
 import { createMemoryHistory } from 'history';
-import { Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { Router } from '@kbn/shared-ux-router';
 import { MemoryHistory } from 'history';
 import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@@ -39,13 +38,11 @@ export const render = (
 
   return testLibRender(
     <Router history={history}>
-      <CompatRouter>
-        <KibanaContextProvider services={{ ...core }}>
-          <UrlParamsProvider>
-            <EuiThemeProvider>{component}</EuiThemeProvider>
-          </UrlParamsProvider>
-        </KibanaContextProvider>
-      </CompatRouter>
+      <KibanaContextProvider services={{ ...core }}>
+        <UrlParamsProvider>
+          <EuiThemeProvider>{component}</EuiThemeProvider>
+        </UrlParamsProvider>
+      </KibanaContextProvider>
     </Router>
   );
 };

x-pack/plugins/ux/public/context/url_params_context/url_params_context.test.tsx

@@ -10,8 +10,8 @@ import { mount } from 'enzyme';
 import { History, Location } from 'history';
 import moment from 'moment-timezone';
 import * as React from 'react';
-import { MemoryRouter, Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
+import { MemoryRouter, Router } from '@kbn/shared-ux-router';
+
 import type { UrlParams } from './types';
 import { UrlParamsContext, UrlParamsProvider } from './url_params_context';
 
@@ -165,27 +165,25 @@ describe('UrlParamsContext', () => {
 
     const wrapper = mount(
       <Router history={history}>
-        <CompatRouter>
-          <UrlParamsProvider>
-            <UrlParamsContext.Consumer>
-              {({ urlParams, refreshTimeRange }) => {
-                return (
-                  <React.Fragment>
-                    <span id="data">{JSON.stringify(urlParams, null, 2)}</span>
-                    <button
-                      onClick={() =>
-                        refreshTimeRange({
-                          rangeFrom: 'now-1d/d',
-                          rangeTo: 'now-1d/d',
-                        })
-                      }
-                    />
-                  </React.Fragment>
-                );
-              }}
-            </UrlParamsContext.Consumer>
-          </UrlParamsProvider>
-        </CompatRouter>
+        <UrlParamsProvider>
+          <UrlParamsContext.Consumer>
+            {({ urlParams, refreshTimeRange }) => {
+              return (
+                <React.Fragment>
+                  <span id="data">{JSON.stringify(urlParams, null, 2)}</span>
+                  <button
+                    onClick={() =>
+                      refreshTimeRange({
+                        rangeFrom: 'now-1d/d',
+                        rangeTo: 'now-1d/d',
+                      })
+                    }
+                  />
+                </React.Fragment>
+              );
+            }}
+          </UrlParamsContext.Consumer>
+        </UrlParamsProvider>
       </Router>
     );
 

x-pack/plugins/ux/tsconfig.json

@@ -38,6 +38,7 @@
     "@kbn/es-query",
     "@kbn/exploratory-view-plugin",
     "@kbn/observability-shared-plugin",
+    "@kbn/shared-ux-router",
   ],
   "exclude": [
     "target/**/*",