stuff

src/CourseContainer.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  Route, Switch, useParams, useRouteMatch,
+} from 'react-router-dom';
+import SequenceContainer from './SequenceContainer';
+
+export default (props) => {
+  const { path } = useRouteMatch();
+  const { courseId } = useParams();
+
+  return (
+    <>
+      <div>CourseContainer</div>
+      <Switch>
+        <Route exact path={path}>
+          <h3>{path} find the sequence and redirect</h3>
+        </Route>
+
+        <Route exact path={`${path}/home`}>
+          <h3>Course Home</h3>
+        </Route>
+        {/* CoursewareContainer ???? */}
+        <Route
+          path={`${path}/sequence/:sequenceId`}
+          component={SequenceContainer}
+        />
+      </Switch>
+    </>
+  );
+};

src/SequenceContainer.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  Route, Switch, useParams, useRouteMatch,
+} from 'react-router-dom';
+
+export default (props) => {
+  const { path } = useRouteMatch();
+  const { courseId, sequenceId } = useParams();
+  // const { courseId } = props;
+
+  return (
+    <>
+      <div>SequenceContainer</div>
+
+      {courseId} <br />
+      {sequenceId}
+      <Switch>
+        <Route exact path={path}>
+          <h3>{path} find the unit and redirect</h3>
+        </Route>
+        <Route exact path={`${path}/home`}>
+          <h3>Course Home</h3>
+        </Route>
+        <Route
+          path={`${path}/sequence/:sequenceId`}
+          render={(routeProps) => (
+            <SequenceContainer {...routeProps} courseId={courseId} />
+          )}
+        />
+      </Switch>
+      {props.children}
+    </>
+  );
+};

src/courseware/course/CourseBreadcrumbs.jsx

@@ -45,7 +45,7 @@ export default function CourseBreadcrumbs({
 
   const links = useMemo(() => {
     if (courseStatus === 'loaded' && sequenceStatus === 'loaded') {
-      return [section, sequence].map((node) => ({
+      return [section, sequence].filter(node => !!node).map((node) => ({
         id: node.id,
         label: node.title,
         url: `${getConfig().LMS_BASE_URL}/courses/${course.id}/course/#${node.id}`,

src/index.jsx

@@ -19,6 +19,7 @@ import './index.scss';
 import './assets/favicon.ico';
 import CoursewareContainer from './courseware';
 import CourseHomeContainer from './course-home';
+import CourseContainer from './CourseContainer';
 
 import store from './store';
 
@@ -27,15 +28,7 @@ subscribe(APP_READY, () => {
     <AppProvider store={store}>
       <UserMessagesProvider>
         <Switch>
-          <Route path="/course/:courseId/home" component={CourseHomeContainer} />
-          <Route
-            path={[
-              '/course/:courseId/:sequenceId/:unitId',
-              '/course/:courseId/:sequenceId',
-              '/course/:courseId',
-            ]}
-            component={CoursewareContainer}
-          />
+          <Route path="/course/:courseId" component={CourseContainer} />
         </Switch>
         <Footer />
       </UserMessagesProvider>