chore:(react-router-v6): Moving more logic across to react-router-v6

packages/core/src/components/Button/Button.stories.tsx

@@ -15,12 +15,7 @@
  */
 import React, { FunctionComponentFactory } from 'react';
 import { Button } from './Button';
-import {
-  MemoryRouter,
-  Route,
-  useLocation,
-  Link as RouterLink,
-} from 'react-router-dom';
+import { MemoryRouter, Route, useLocation } from 'react-router-dom';
 import { createRouteRef } from '@backstage/core-api';
 
 const Location = () => {
@@ -70,14 +65,7 @@ export const PassProps = () => {
 
   return (
     <>
-      <Button
-        to={routeRef.path}
-        /** react-router-dom related prop */
-        component={RouterLink}
-        /** material-ui related prop */
-        color="secondary"
-        variant="outlined"
-      >
+      <Button to={routeRef.path} color="secondary" variant="outlined">
         This link
       </Button>
       &nbsp;has props for both material-ui's component as well as for

packages/core/src/components/Button/Button.tsx

@@ -25,6 +25,11 @@ type Props = ComponentProps<typeof MaterialButton> &
  * Thin wrapper on top of material-ui's Button component
  * Makes the Button to utilise react-router
  */
-export const Button = React.forwardRef<any, Props>((props, ref) => (
-  <MaterialButton ref={ref} component={RouterLink} {...props} />
+
+const LinkBehavior = React.forwardRef<any, Props>((props, ref) => (
+  <RouterLink ref={ref} {...props} />
+));
+
+export const Button = React.forwardRef<any, Props>((props, ref) => (
+  <MaterialButton ref={ref} component={LinkBehavior} {...props} />
 ));

packages/core/src/components/Link/Link.stories.tsx

@@ -73,7 +73,7 @@ export const PassProps = () => {
       <Link
         to={routeRef.path}
         /** react-router-dom related prop */
-        component={RouterNavLink}
+        as={RouterNavLink}
         /** material-ui related prop */
         color="secondary"
       >

packages/core/src/components/Link/Link.tsx

@@ -19,12 +19,12 @@ import { Link as MaterialLink } from '@material-ui/core';
 import { Link as RouterLink } from 'react-router-dom';
 
 type Props = ComponentProps<typeof MaterialLink> &
-  ComponentProps<typeof RouterLink>;
+  ComponentProps<typeof RouterLink> & { as?: React.FC<any> };
 
 /**
  * Thin wrapper on top of material-ui's Link component
  * Makes the Link to utilise react-router
  */
 export const Link = React.forwardRef<any, Props>((props, ref) => (
-  <MaterialLink ref={ref} component={RouterLink} {...props} />
+  <MaterialLink ref={ref} as={RouterLink} {...props} />
 ));

packages/test-utils/src/testUtils/appWrappers.tsx

@@ -80,7 +80,7 @@ export function wrapInTestApp(
   return (
     <AppProvider>
       <MemoryRouter initialEntries={routeEntries}>
-        <Route component={Wrapper} />
+        <Route element={<Wrapper />} />
       </MemoryRouter>
     </AppProvider>
   );