fix: handle extra slashes in urls (#5)

* fix: handle extra slashes in urls

* chore: bump version

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

Author: icd2k3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-react-router-breadcrumbs",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A hook for displaying and setting breadcrumbs for react router",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",

src/index.test.js

@@ -396,4 +396,11 @@ describe('use-react-router-breadcrumbs', () => {
       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,