Resolved router error on app start

Author: kevinfarrugia

package.json

@@ -35,7 +35,6 @@
     "node-cache": "^5.1.2",
     "node-fetch": "^2.6.7",
     "normalize.css": "^8.0.1",
-    "path-to-regexp": "^6.2.0",
     "pretty-error": "^4.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/js/components/AppRouter/config.js

@@ -9,6 +9,10 @@ const Home = loadable(() => import("../Home"));
 const About = loadable(() => import("../About"));
 const DefaultPage = loadable(() => import("../DefaultPage"));
 
+function Empty() {
+  return null;
+}
+
 const getRouteConfig = (name) => {
   switch (name) {
     case "home":
@@ -31,7 +35,7 @@ const getRouteConfig = (name) => {
       // return a 404 page
       console.error(`Route ${name} does not have a component.`);
       return {
-        Component: null,
+        Component: Empty,
       };
   }
 };

src/service/Router/router.js

@@ -1,5 +1,5 @@
 import NodeCache from "node-cache";
-import { match } from "path-to-regexp";
+import { matchPath } from "react-router";
 
 import { toRoutes } from "./adapter";
 import { get } from "./service";
@@ -13,24 +13,24 @@ const cache = new NodeCache({
   useClones: false,
 });
 
-const refreshCache = async (key) => {
+const refreshCache = async (key) =>
   get(key)
     .then(({ lang, routes }) => {
       cache.set(lang, Object.freeze(routes));
+      return routes;
     })
     .catch((e) => {
       console.error(e);
       return null;
     });
-};
 
 const getData = async (key) => {
   const value = cache.get(key);
   // if no routing table is cached,
   // then it will retrieve a new routing table
   if (!value) {
-    await refreshCache(key);
-    return cache.get(key);
+    const data = await refreshCache(key);
+    return data;
   }
   // Otherwise, we retrieve the cached version
   return value;
@@ -43,7 +43,7 @@ const getRoutingTable = async () => {
 
 const isValidPath = async (urlPath) => {
   const routes = await getRoutingTable();
-  return routes.find((n) => match(n.path)(urlPath));
+  return routes.find((n) => matchPath(n.path, urlPath));
 };
 
 const getPath = async (docType) => {