Supporting navigation to / and basePath when basePath is defined (#252)

* Supporting navigation to / and basePath when basePath is defined

* adding changeset and fixing test

* lint fix

* Updating changeset to minor

Author: upreeti

.changeset/ninety-penguins-speak.md

@@ -0,0 +1,5 @@
+---
+"react-resource-router": minor
+---
+
+Supporting navigation to / and basePath when basePath is defined

src/common/utils/match-route/index.ts

@@ -26,6 +26,8 @@ const matchRoute = <T extends Route | InvariantRoute>(
   queryParams: Query = {},
   basePath = ''
 ) => {
+  // if navigating to to `/` or just basePath, then do not append basePath
+  const updatedBasePath = ['/', basePath].includes(pathname) ? '' : basePath;
   const queryParamObject =
     typeof queryParams === 'string'
       ? (qs.parse(queryParams) as Query)
@@ -34,7 +36,7 @@ const matchRoute = <T extends Route | InvariantRoute>(
   const cachedMatch = matchRouteCache.get<T>(
     pathname,
     queryParamObject,
-    basePath
+    updatedBasePath
   );
   if (cachedMatch && routes.includes(cachedMatch.route)) return cachedMatch;
 
@@ -43,10 +45,15 @@ const matchRoute = <T extends Route | InvariantRoute>(
       routes[i],
       pathname,
       queryParamObject,
-      basePath
+      updatedBasePath
     );
     if (matchedRoute) {
-      matchRouteCache.set(pathname, queryParamObject, basePath, matchedRoute);
+      matchRouteCache.set(
+        pathname,
+        queryParamObject,
+        updatedBasePath,
+        matchedRoute
+      );
 
       return matchedRoute;
     }

src/common/utils/match-route/test.ts

@@ -128,6 +128,106 @@ describe('matchRoute()', () => {
         route: routeB,
       });
     });
+
+    it('should ignore basePath when navigating to / without path params', () => {
+      const routeA = { path: '/', component: Noop };
+      const routeB = { path: '/:bar', component: Noop };
+      const basePath = '/base';
+      expect(
+        matchRoute(
+          // @ts-ignore
+          [routeA, routeB],
+          '/',
+          DEFAULT_QUERY_PARAMS,
+          basePath
+        )
+      ).toMatchObject({
+        route: routeA,
+      });
+
+      expect(
+        // @ts-ignore
+        matchRoute([routeA, routeB], '/abc', DEFAULT_QUERY_PARAMS, basePath)
+      ).toBeNull();
+
+      expect(
+        matchRoute(
+          // @ts-ignore
+          [routeA, routeB],
+          '/base/abc',
+          DEFAULT_QUERY_PARAMS,
+          basePath
+        )
+      ).toMatchObject({
+        route: routeA,
+      });
+
+      expect(
+        matchRoute(
+          // @ts-ignore
+          [routeB, routeA],
+          '/base/def',
+          DEFAULT_QUERY_PARAMS,
+          basePath
+        )
+      ).toMatchObject({
+        route: routeB,
+      });
+    });
+
+    it('should ignore basePath when navigating to just basePath', () => {
+      const routeA = { path: '/base', component: Noop };
+      const routeB = { path: '/', component: Noop };
+      const routeC = { path: '/:bar', component: Noop };
+      const basePath = '/base';
+      expect(
+        matchRoute(
+          // @ts-ignore
+          [routeA, routeB, routeC],
+          basePath,
+          DEFAULT_QUERY_PARAMS,
+          basePath
+        )
+      ).toMatchObject({
+        route: routeA,
+      });
+
+      expect(
+        matchRoute(
+          // @ts-ignore
+          [routeA, routeB, routeC],
+          '/base/base',
+          DEFAULT_QUERY_PARAMS,
+          basePath
+        )
+      ).toMatchObject({
+        route: routeA,
+      });
+
+      expect(
+        matchRoute(
+          // @ts-ignore
+          [routeC, routeA, routeB],
+          '/base/',
+          DEFAULT_QUERY_PARAMS,
+          basePath
+        )
+      ).toMatchObject({
+        route: routeB,
+      });
+
+      expect(
+        matchRoute(
+          // @ts-ignore
+          [routeA, routeC, routeB],
+          '/base/abc',
+          DEFAULT_QUERY_PARAMS,
+          basePath
+        )
+      ).toMatchObject({
+        route: routeC,
+      });
+    });
   });
 
   describe('query', () => {