From 273db0314a771df699b8e3d95ccd30ffc83ef8df Mon Sep 17 00:00:00 2001
From: blam <ben@blam.sh>
Date: Thu, 11 Jun 2020 20:35:48 +0200
Subject: [PATCH] chore(react-router-v6): Managed to get the Link + Button
 components working as expected

---
 packages/core/src/components/Button/Button.test.jsx | 9 +++++----
 packages/core/src/components/Link/Link.test.jsx     | 6 +++---
 packages/core/src/components/Link/Link.tsx          | 2 +-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/Button/Button.test.jsx b/packages/core/src/components/Button/Button.test.jsx
index bf057e4261..5750f84101 100644
--- a/packages/core/src/components/Button/Button.test.jsx
+++ b/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();
diff --git a/packages/core/src/components/Link/Link.test.jsx b/packages/core/src/components/Link/Link.test.jsx
index c35cdfdbe6..bc279d2fd6 100644
--- a/packages/core/src/components/Link/Link.test.jsx
+++ b/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();
diff --git a/packages/core/src/components/Link/Link.tsx b/packages/core/src/components/Link/Link.tsx
index 8d800aadcd..ebcc2819d9 100644
--- a/packages/core/src/components/Link/Link.tsx
+++ b/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} />
 ));