refactor: use Link from react-router in Breadcrumb links

Author: dcoa

src/authz-module/components/AuthZTitle.test.tsx

@@ -1,7 +1,12 @@
-import React from 'react';
+import { ReactNode } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import AuthZTitle, { AuthZTitleProps } from './AuthZTitle';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  Link: ({ children, to }:{ children:ReactNode, to:string }) => <a href={to}>{children}</a>,
+}));
+
 describe('AuthZTitle', () => {
   const defaultProps: AuthZTitleProps = {
     activeLabel: 'Current Page',
@@ -24,8 +29,9 @@ describe('AuthZTitle', () => {
 
     render(<AuthZTitle {...defaultProps} navLinks={navLinks} />);
 
-    navLinks.forEach(({ label }) => {
+    navLinks.forEach(({ label, to }) => {
       expect(screen.getByText(label)).toBeInTheDocument();
+      expect(screen.getByText(label)).toHaveAttribute('href', expect.stringContaining(to));
     });
 
     expect(screen.getByText(defaultProps.activeLabel)).toBeInTheDocument();

src/authz-module/components/AuthZTitle.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
 import {
   Breadcrumb, Col, Container, Row, Button, Badge,
 } from '@openedx/paragon';
@@ -26,6 +27,7 @@ const AuthZTitle = ({
 }: AuthZTitleProps) => (
   <Container className="p-5 bg-light-100">
     <Breadcrumb
+      linkAs={Link}
       links={navLinks}
       activeLabel={activeLabel}
     />