refactor: change page route logic

example/index.jsx

@@ -11,7 +11,7 @@ import {
   AppProvider,
   AuthenticatedPageRoute,
   ErrorPage,
-  PageRoute,
+  PageWrap,
 } from '../src/react';
 
 import './index.scss';
@@ -22,10 +22,10 @@ subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider>
       <Routes>
-        <Route path="/" element={<PageRoute path="/"><ExamplePage /></PageRoute>} />
+        <Route path="/" element={<PageWrap><ExamplePage /></PageWrap>} />
         <Route
           path="/error_example"
-          element={<PageRoute path="/error_example"><ErrorPage message="Test error message" /></PageRoute>}
+          element={<PageWrap><ErrorPage message="Test error message" /></PageWrap>}
         />
         <Route path="/authenticated" element={<AuthenticatedPageRoute><AuthenticatedPage /></AuthenticatedPageRoute>} />
       </Routes>

src/initialize.js

@@ -11,18 +11,18 @@
  *   APP_READY,
  *   subscribe,
  * } from '@edx/frontend-platform';
- * import { AppProvider, ErrorPage, PageRoute } from '@edx/frontend-platform/react';
+ * import { AppProvider, ErrorPage, PageWrap } from '@edx/frontend-platform/react';
  * import React from 'react';
  * import ReactDOM from 'react-dom';
- * import { Switch, Routes } from 'react-router-dom';
+ * import { Routes, Route } from 'react-router-dom';
  *
  * subscribe(APP_READY, () => {
  *   ReactDOM.render(
  *     <AppProvider store={configureStore()}>
  *       <Header />
  *       <main>
  *         <Routes>
- *           <PageRoute path="/" element={PaymentPage} />
+ *           <Route path="/" element={<PageWrap><PaymentPage /></PageWrap>} />
  *         </Routes>
  *       </main>
  *       <Footer />

src/react/AuthenticatedPageRoute.jsx

@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useMatch } from 'react-router-dom';
 
 import AppContext from './AppContext';
-import PageRoute from './PageRoute';
+import PageWrap from './PageWrap';
 import { getLoginRedirectUrl } from '../auth';
 
 /**
@@ -14,49 +13,36 @@ import { getLoginRedirectUrl } from '../auth';
  *
  * It can optionally accept an override URL to redirect to instead of the login page.
  *
- * Like a `PageRoute`, also calls `sendPageEvent` when the route becomes active.
+ * Like a `PageWrap`, also calls `sendPageEvent` when the route becomes active.
  *
- * @see PageRoute
+ * @see PageWrap
  * @see {@link module:frontend-platform/analytics~sendPageEvent}
  * @memberof module:React
  * @param {Object} props
  * @param {string} props.redirectUrl The URL anonymous users should be redirected to, rather than
  * viewing the route's contents.
  */
-export default function AuthenticatedPageRoute({ redirectUrl, children, ...props }) {
-  const match = useMatch({
-    path: props.path,
-    // eslint-disable-next-line react/prop-types
-    caseSensitive: props.sensitive,
-    // eslint-disable-next-line react/prop-types
-    end: props.strict,
-    // eslint-disable-next-line react/prop-types
-    exact: props.exact,
-  });
-
+export default function AuthenticatedPageRoute({ redirectUrl, children }) {
   const { authenticatedUser } = useContext(AppContext);
   if (authenticatedUser === null) {
-    if (match) {
-      const destination = redirectUrl || getLoginRedirectUrl(global.location.href);
-      global.location.assign(destination);
-    }
+    const destination = redirectUrl || getLoginRedirectUrl(global.location.href);
+    global.location.assign(destination);
+
     return null;
   }
 
   return (
-    <PageRoute {...props}>
+    <PageWrap>
       {children}
-    </PageRoute>
+    </PageWrap>
   );
 }
 
 AuthenticatedPageRoute.propTypes = {
   redirectUrl: PropTypes.string,
   children: PropTypes.node.isRequired,
-  path: PropTypes.string,
 };
 
 AuthenticatedPageRoute.defaultProps = {
   redirectUrl: null,
-  path: '/authenticated',
 };

src/react/PageWrap.jsx

@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+// eslint-disable-next-line no-unused-vars
+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { sendPageEvent } from '../analytics';
+
+/**
+ * A Wrapper component that calls `sendPageEvent` when it becomes active.
+ *
+ * @see {@link module:frontend-platform/analytics~sendPageEvent}
+ * @memberof module:React
+ * @param {Object} props
+ */
+export default function PageWrap({ children }) {
+  const location = useLocation();
+
+  useEffect(() => {
+    sendPageEvent();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
+
+  return children;
+}

src/react/index.js

@@ -12,5 +12,5 @@ export { default as AuthenticatedPageRoute } from './AuthenticatedPageRoute';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export { default as ErrorPage } from './ErrorPage';
 export { default as LoginRedirect } from './LoginRedirect';
-export { default as PageRoute } from './PageRoute';
+export { default as PageWrap } from './PageWrap';
 export { useAppEvent } from './hooks';