From 76e83cc7376dc390b2512e41224fde02e05ab88a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Behmo?= <github@behmo.com>
Date: Mon, 20 Dec 2021 16:40:25 +0100
Subject: [PATCH] fix: Use Link from router to fix path based routing issue
 (#780)

Co-authored-by: Arslan <arslan.ashraf@arbisoft.com>
---
 src/courseware/course/CourseBreadcrumbs.jsx      | 14 +++++++++-----
 src/courseware/course/CourseBreadcrumbs.test.jsx | 15 +++++++++------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/courseware/course/CourseBreadcrumbs.jsx b/src/courseware/course/CourseBreadcrumbs.jsx
index d0148ef1..5c2752b3 100644
--- a/src/courseware/course/CourseBreadcrumbs.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.jsx
@@ -6,6 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHome } from '@fortawesome/free-solid-svg-icons';
 import { useSelector } from 'react-redux';
 import { SelectMenu } from '@edx/paragon';
+import { Link } from 'react-router-dom';
 import { useModel, useModels } from '../../generic/model-store';
 /** [MM-P2P] Experiment */
 import { MMP2PFlyoverTrigger } from '../../experiments/mm-p2p';
@@ -30,9 +31,12 @@ function CourseBreadcrumb({
       >
         { getConfig().ENABLE_JUMPNAV !== 'true' || content.length < 2 || !isStaff
           ? (
-            <a className="text-primary-500" href={`/course/${courseId}/${defaultContent.id}`}>
+            <Link
+              className="text-primary-500"
+              to={`/course/${courseId}/${defaultContent.id}`}
+            >
               {defaultContent.label}
-            </a>
+            </Link>
           )
           : (
             <SelectMenu isLink defaultMessage={defaultContent.label}>
@@ -122,9 +126,9 @@ export default function CourseBreadcrumbs({
     <nav aria-label="breadcrumb" className="my-4 d-inline-block col-sm-10">
       <ol className="list-unstyled d-flex  flex-nowrap align-items-center m-0">
         <li className="list-unstyled d-flex m-0">
-          <a
-            href={`/course/${courseId}/home`}
+          <Link
             className="flex-shrink-0 text-primary"
+            to={`/course/${courseId}/home`}
           >
             <FontAwesomeIcon icon={faHome} className="mr-2" />
             <FormattedMessage
@@ -132,7 +136,7 @@ export default function CourseBreadcrumbs({
               description="The course home link in breadcrumbs nav"
               defaultMessage="Course"
             />
-          </a>
+          </Link>
         </li>
         {links.map(content => (
           <CourseBreadcrumb
diff --git a/src/courseware/course/CourseBreadcrumbs.test.jsx b/src/courseware/course/CourseBreadcrumbs.test.jsx
index ae5111b8..d4412710 100644
--- a/src/courseware/course/CourseBreadcrumbs.test.jsx
+++ b/src/courseware/course/CourseBreadcrumbs.test.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { screen, render } from '@testing-library/react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform';
+import { BrowserRouter } from 'react-router-dom';
 import { useModel, useModels } from '../../generic/model-store';
 import CourseBreadcrumbs from './CourseBreadcrumbs';
 
@@ -105,12 +106,14 @@ describe('CourseBreadcrumbs', () => {
     ],
   ]);
   render(
-    <CourseBreadcrumbs
-      courseId="course-v1:edX+DemoX+Demo_Course"
-      sectionId="block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations"
-      sequenceId="block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions"
-      isStaff
-    />,
+    <BrowserRouter>
+      <CourseBreadcrumbs
+        courseId="course-v1:edX+DemoX+Demo_Course"
+        sectionId="block-v1:edX+DemoX+Demo_Course+type@chapter+block@interactive_demonstrations"
+        sequenceId="block-v1:edX+DemoX+Demo_Course+type@sequential+block@basic_questions"
+        isStaff
+      />
+    </BrowserRouter>,
   );
   it('renders course breadcrumbs as expected', async () => {
     expect(screen.queryAllByRole('link')).toHaveLength(1);