Fix: Handle double slashes in URL (#106)

* fix: handle double slashes in url

* chore: bump version

Co-authored-by: Justin Schrader <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-router-breadcrumbs-hoc",
-  "version": "3.2.9",
+  "version": "3.2.10",
   "description": "small, flexible, higher order component for rendering breadcrumbs with react-router 4.x",
   "repository": "icd2k3/react-router-breadcrumbs-hoc",
   "main": "dist/cjs/index.js",

src/index.test.js

@@ -377,4 +377,11 @@ describe('react-router-breadcrumbs-hoc', () => {
       expect(forwardedProps).toEqual('prop forwarding works');
     });
   });
+
+  describe('Edge cases', () => {
+    it('Should handle 2 slashes in a URL (site.com/sandwiches//tuna)', () => {
+      const { breadcrumbs } = render({ pathname: '/sandwiches//tuna' });
+      expect(breadcrumbs).toBe('Home / Sandwiches / Tuna');
+    });
+  });
 });

src/index.tsx

@@ -199,17 +199,20 @@ export const getBreadcrumbs = (
 
   pathname
     .split('?')[0]
-    // Remove trailing slash "/" from pathname.
-    .replace(/\/$/, '')
     // Split pathname into sections.
     .split('/')
     // Reduce over the sections and call `getBreadcrumbMatch()` for each section.
-    .reduce((previousSection: string, currentSection: string) => {
+    .reduce((previousSection: string, currentSection: string, index: number) => {
       // Combine the last route section with the currentSection.
       // For example, `pathname = /1/2/3` results in match checks for
       // `/1`, `/1/2`, `/1/2/3`.
       const pathSection = !currentSection ? '/' : `${previousSection}/${currentSection}`;
 
+      // Ignore trailing slash or double slashes in the URL
+      if (pathSection === '/' && index !== 0) {
+        return '';
+      }
+
       const breadcrumb = getBreadcrumbMatch({
         currentSection,
         location,