feat: upgrade react router to v6 (#126)

Co-authored-by: Matthew Carter <mcarter@edx.org>

src/App.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -74,7 +73,7 @@ export const App = () => {
     }
   }, [authenticatedUser, loadData]);
   return (
-    <Router>
+    <>
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
       </Helmet>
@@ -97,7 +96,7 @@ export const App = () => {
         <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
         <ZendeskFab />
       </div>
-    </Router>
+    </>
   );
 };
 

src/App.test.jsx

@@ -61,9 +61,6 @@ describe('App router component', () => {
       it('displays learner dashboard header', () => {
         expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1);
       });
-      it('wraps the page in a browser router', () => {
-        expect(el.instance.el.type).toEqual('BrowserRouter');
-      });
       test('Footer logo drawn from env variable', () => {
         expect(el.instance.findByType(Footer)[0].props.logo).toEqual(logo);
       });

src/__snapshots__/App.test.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App router component component initialize failure snapshot 1`] = `
-<BrowserRouter>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -28,11 +28,11 @@ exports[`App router component component initialize failure snapshot 1`] = `
     />
     <ZendeskFab />
   </div>
-</BrowserRouter>
+</Fragment>
 `;
 
 exports[`App router component component no network failure snapshot 1`] = `
-<BrowserRouter>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -55,11 +55,11 @@ exports[`App router component component no network failure snapshot 1`] = `
     />
     <ZendeskFab />
   </div>
-</BrowserRouter>
+</Fragment>
 `;
 
 exports[`App router component component refresh failure snapshot 1`] = `
-<BrowserRouter>
+<Fragment>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -86,5 +86,5 @@ exports[`App router component component refresh failure snapshot 1`] = `
     />
     <ZendeskFab />
   </div>
-</BrowserRouter>
+</Fragment>
 `;

src/__snapshots__/index.test.jsx.snap

@@ -13,18 +13,28 @@ exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
       "redux": "store",
     }
   }
+  wrapWithRouter={true}
 >
   <NoticesWrapper>
-    <Switch>
-      <PageRoute
+    <Routes>
+      <Route
+        element={
+          <PageWrap>
+            <App />
+          </PageWrap>
+        }
         path="/"
-      >
-        <App />
-      </PageRoute>
-      <Redirect
-        to="/"
       />
-    </Switch>
+      <Route
+        element={
+          <Navigate
+            replace={true}
+            to="/"
+          />
+        }
+        path="*"
+      />
+    </Routes>
   </NoticesWrapper>
 </AppProvider>
 `;

src/index.jsx

@@ -4,12 +4,14 @@ import 'regenerator-runtime/runtime';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Switch, Redirect } from 'react-router-dom';
+import {
+  Route, Navigate, Routes,
+} from 'react-router-dom';
 
 import {
   AppProvider,
   ErrorPage,
-  PageRoute,
+  PageWrap,
 } from '@edx/frontend-platform/react';
 import store from 'data/store';
 import {
@@ -31,12 +33,10 @@ subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={store}>
       <NoticesWrapper>
-        <Switch>
-          <PageRoute path="/">
-            <App />
-          </PageRoute>
-          <Redirect to="/" />
-        </Switch>
+        <Routes>
+          <Route path="/" element={<PageWrap><App /></PageWrap>} />
+          <Route path="*" element={<Navigate to="/" replace />} />
+        </Routes>
       </NoticesWrapper>
     </AppProvider>,
     document.getElementById('root'),