core-components: fix Link stories

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

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

@@ -44,7 +44,7 @@ const LinkWrapper = React.forwardRef<any, LinkProps>((props, ref) => (
  * @public
  * @remarks
  *
- * Makes the Button to utilise react-router
+ * Makes the Button to utilize react-router
  */
 export const Button = React.forwardRef<any, ButtonProps>((props, ref) => (
   <MaterialButton ref={ref} component={LinkWrapper} {...props} />

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

@@ -15,7 +15,12 @@
  */
 import React, { ComponentType } from 'react';
 import { Link } from './Link';
-import { Route, useLocation, NavLink as RouterNavLink } from 'react-router-dom';
+import {
+  Route,
+  useLocation,
+  NavLink as RouterNavLink,
+  Routes,
+} from 'react-router-dom';
 import { createRouteRef, useRouteRef } from '@backstage/core-plugin-api';
 import { wrapInTestApp } from '@backstage/test-utils';
 
@@ -50,11 +55,11 @@ export const Default = () => {
 
   return (
     <>
-      <Link to={link()}>This link</Link>&nbsp;will utilise the react-router
+      <Link to={link()}>This link</Link>&nbsp;will utilize the react-router
       MemoryRouter's navigation
-      <Route path={link()}>
-        <h1>Hi there!</h1>
-      </Route>
+      <Routes>
+        <Route path={link()} element={<h1>Hi there!</h1>} />
+      </Routes>
     </>
   );
 };
@@ -75,9 +80,9 @@ export const PassProps = () => {
       </Link>
       &nbsp;has props for both material-ui's component as well as for
       react-router-dom's
-      <Route path={link()}>
-        <h1>Hi there!</h1>
-      </Route>
+      <Routes>
+        <Route path={link()} element={<h1>Hi there!</h1>} />
+      </Routes>
     </>
   );
 };