fix: make PUBLIC_PATH compatible with React Router v6 (#574)

Author: ormsbee

src/initialize.js

@@ -102,6 +102,18 @@ export const history = (typeof window !== 'undefined')
     basename: getPath(getConfig().PUBLIC_PATH),
   }) : createMemoryHistory();
 
+/**
+ * The string basename that is the root directory of this MFE.
+ *
+ * In devstack, this should always just return "/", because each MFE is in its own server/domain.
+ *
+ * In Tutor, all MFEs are deployed to a common server, each under a different top-level directory.
+ * The basename is the root path for a given MFE, e.g. "/library-authoring". It is set by tutor-mfe
+ * as an ENV variable in the Docker file, and we read it here from that configuration so that it
+ * can be passed into a Router later.
+ */
+export const basename = getPath(getConfig().PUBLIC_PATH);
+
 /**
  * The default handler for the initialization lifecycle's `initError` phase.  Logs the error to the
  * LoggingService using `logError`

src/react/AppProvider.jsx

@@ -16,6 +16,7 @@ import {
   IntlProvider,
   LOCALE_CHANGED,
 } from '../i18n';
+import { basename } from '../initialize';
 
 /**
  * A wrapper component for React-based micro-frontends to initialize a number of common data/
@@ -72,7 +73,7 @@ export default function AppProvider({ store, children, wrapWithRouter }) {
         >
           <OptionalReduxProvider store={store}>
             {wrapWithRouter ? (
-              <Router>
+              <Router basename={basename}>
                 {children}
               </Router>
             ) : children}