chore(react-router-v6): Managed to get the Link + Button components working as expected

packages/core/src/components/Button/Button.test.jsx

@@ -18,20 +18,21 @@ import React from 'react';
 import { render, fireEvent, act } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { Button } from './Button';
-import { Route } from 'react-router';
+import { Route, Routes } from 'react-router';
 
 describe('<Button />', () => {
   it('navigates using react-router', async () => {
     const testString = 'This is test string';
     const buttonLabel = 'Navigate!';
-    const { getByText, getByRole } = render(
+    const { getByText, getByRole, ...all } = render(
       wrapInTestApp(
-        <>
+        <Routes>
           <Route path="/test" element={<p>{testString}</p>} />
           <Button to="/test">{buttonLabel}</Button>
-        </>,
+        </Routes>,
       ),
     );
+
     expect(() => getByText(testString)).toThrow();
     await act(async () => fireEvent.click(getByRole('button')));
     expect(getByText(testString)).toBeInTheDocument();

packages/core/src/components/Link/Link.test.jsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { wrapInTestApp } from '@backstage/test-utils';
 import { Link } from './Link';
-import { Route } from 'react-router';
+import { Route, Routes } from 'react-router';
 import { act } from 'react-dom/test-utils';
 
 describe('<Link />', () => {
@@ -27,10 +27,10 @@ describe('<Link />', () => {
     const linkText = 'Navigate!';
     const { getByText } = render(
       wrapInTestApp(
-        <>
+        <Routes>
           <Link to="/test">{linkText}</Link>
           <Route path="/test">{testString}</Route>
-        </>,
+        </Routes>,
       ),
     );
     expect(() => getByText(testString)).toThrow();

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

@@ -26,5 +26,5 @@ type Props = ComponentProps<typeof MaterialLink> &
  * Makes the Link to utilise react-router
  */
 export const Link = React.forwardRef<any, Props>((props, ref) => (
-  <MaterialLink ref={ref} as={RouterLink} {...props} />
+  <MaterialLink ref={ref} component={RouterLink} {...props} />
 ));