Update to React Router 6

Follow the remaining steps in the migration guide to replace the
compat layer with actual use of React Router 6 directly. This includes:
- move `Route` children into the `element` prop
- refactor use of the `Link`'s `component` prop to the new approach
- update tests to avoid relying on `history`
- and more

While this does update us to React Router 6 there is still more to
be done to take advantage of the new features, such as the `handle`
prop on `Route`s to avoid the need for our custom `NamespacedRoute`
component etc. This will be tackled in the near future and will
dramatically simplify the code, allowing for a more uniform approach
to handling Kube resources without the current overhead of custom
containers per kind etc.

.storybook/Container.jsx

@@ -13,9 +13,7 @@ limitations under the License.
 
 import { StrictMode } from 'react';
 import { IntlProvider } from 'react-intl';
-import { createMemoryHistory } from 'history';
-import { Router, Switch } from 'react-router-dom';
-import { CompatRoute, CompatRouter } from 'react-router-dom-v5-compat';
+import { Route, MemoryRouter as Router, Routes } from 'react-router-dom';
 
 import messages from '../src/nls/messages_en.json';
 
@@ -31,16 +29,17 @@ export default function Container({
     <IntlProvider locale="en" defaultLocale="en" messages={messages['en']}>
       {notes && <p>{notes}</p>}
       <div data-floating-menu-container role="main">
-        <Router history={createMemoryHistory({ initialEntries: [route] })}>
-          <CompatRouter>
-            <Switch>
-              <CompatRoute path={path}>
+        <Router initialEntries={[route]}>
+          <Routes>
+            <Route
+              path={path}
+              element={
                 <StrictMode>
                   <Story />
                 </StrictMode>
-              </CompatRoute>
-            </Switch>
-          </CompatRouter>
+              }
+            />
+          </Routes>
         </Router>
       </div>
     </IntlProvider>

package.json

@@ -43,8 +43,7 @@
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.1",
     "react-intl": "^6.6.6",
-    "react-router-dom": "^5.3.4",
-    "react-router-dom-v5-compat": "^6.23.0",
+    "react-router-dom": "^6.23.1",
     "reconnecting-websocket": "^4.4.0"
   },
   "devDependencies": {
@@ -75,7 +74,6 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "history": "^5.3.0",
     "jsdom": "^24.0.0",
     "lodash.difference": "^4.5.0",
     "lodash.omit": "^4.5.0",

packages/components/package.json

@@ -35,7 +35,7 @@
     "react": "^16.14.0 || ^17.0.1",
     "react-dom": "^16.14.0 || ^17.0.1",
     "react-intl": "^6.4.1",
-    "react-router-dom": "^5.0.0"
+    "react-router-dom": "^6.0.0"
   },
   "engines": {
     "node": "^20.11.0",

packages/components/src/components/Link/Link.jsx

@@ -12,8 +12,34 @@ limitations under the License.
 */
 /* istanbul ignore file */
 
+import { forwardRef } from 'react';
+import { useHref, useLinkClickHandler } from 'react-router-dom';
 import { Link as CarbonLink } from 'carbon-components-react';
 
-export default function Link({ navigate, ...rest }) {
-  return <CarbonLink {...rest} />;
-}
+const Link = forwardRef(
+  ({ onClick, replace = false, state, target, to, ...rest }, ref) => {
+    const href = useHref(to);
+    const handleClick = useLinkClickHandler(to, {
+      replace,
+      state,
+      target
+    });
+
+    return (
+      <CarbonLink
+        {...rest}
+        href={href}
+        onClick={event => {
+          onClick?.(event);
+          if (!event.defaultPrevented) {
+            handleClick(event);
+          }
+        }}
+        ref={ref}
+        target={target}
+      />
+    );
+  }
+);
+
+export default Link;

packages/components/src/components/PageErrorBoundary/PageErrorBoundary.jsx

@@ -12,7 +12,7 @@ limitations under the License.
 */
 
 import { useIntl } from 'react-intl';
-import { useLocation } from 'react-router-dom-v5-compat';
+import { useLocation } from 'react-router-dom';
 
 import ErrorBoundary from '../ErrorBoundary';
 

packages/components/src/components/PipelineRuns/PipelineRuns.jsx

@@ -12,7 +12,6 @@ limitations under the License.
 */
 
 import { useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { getStatus, urls } from '@tektoncd/dashboard-utils';
 import {
   Calendar16 as CalendarIcon,
@@ -22,9 +21,9 @@ import {
 } from '@carbon/icons-react';
 
 import Actions from '../Actions';
-import CustomLink from '../Link';
 import FormattedDate from '../FormattedDate';
 import FormattedDuration from '../FormattedDuration';
+import Link from '../Link';
 import StatusIcon from '../StatusIcon';
 import Table from '../Table';
 
@@ -196,11 +195,7 @@ const PipelineRuns = ({
         <div>
           <span>
             {pipelineRunURL ? (
-              <Link
-                component={CustomLink}
-                to={pipelineRunURL}
-                title={pipelineRunNameTooltip}
-              >
+              <Link to={pipelineRunURL} title={pipelineRunNameTooltip}>
                 {pipelineRunName}
               </Link>
             ) : (
@@ -220,11 +215,7 @@ const PipelineRuns = ({
           <span>
             {(pipelineRefName &&
               (pipelineRunsByPipelineURL ? (
-                <Link
-                  component={CustomLink}
-                  to={pipelineRunsByPipelineURL}
-                  title={pipelineRefName}
-                >
+                <Link to={pipelineRunsByPipelineURL} title={pipelineRefName}>
                   {pipelineRefName}
                 </Link>
               ) : (