From 4fa09f5161b976150c6572a56ca3aa27226cfa99 Mon Sep 17 00:00:00 2001
From: Justin Schrader <icd2k3@gmail.com>
Date: Thu, 11 Nov 2021 08:32:17 -0800
Subject: [PATCH] fix: support layout routes in v6 (#35)

Co-authored-by: Justin Schrader <jschrader@newrelic.com>
---
 package.json      |  2 +-
 src/index.test.js | 41 +++++++++++++++++++++++++++++++++++++++--
 src/index.tsx     |  2 +-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 297eeee..7214969 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "use-react-router-breadcrumbs",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "A hook for displaying and setting breadcrumbs for react router",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
diff --git a/src/index.test.js b/src/index.test.js
index 2cc6c2f..6defd94 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -65,6 +65,7 @@ const components = {
       return <span>Class</span>;
     }
   },
+  Layout: React.memo(({ children }) => <div>{children}</div>),
 };
 
 const getHOC = () => {
@@ -129,7 +130,7 @@ components.Breadcrumbs.propTypes = {
   routes: PropTypes.arrayOf(
     PropTypes.oneOfType([
       PropTypes.shape({
-        path: PropTypes.string.isRequired,
+        path: PropTypes.string,
         breadcrumb: PropTypes.oneOfType([
           PropTypes.node,
           PropTypes.func,
@@ -137,7 +138,15 @@ components.Breadcrumbs.propTypes = {
         ]),
       }),
       PropTypes.shape({
-        index: PropTypes.bool.isRequired,
+        index: PropTypes.bool,
+        breadcrumb: PropTypes.oneOfType([
+          PropTypes.node,
+          PropTypes.func,
+          PropTypes.object,
+        ]),
+      }),
+      PropTypes.shape({
+        children: PropTypes.arrayOf(PropTypes.shape()).isRequired,
         breadcrumb: PropTypes.oneOfType([
           PropTypes.node,
           PropTypes.func,
@@ -174,6 +183,14 @@ components.BreadcrumbExtraPropsTest.propTypes = {
   bar: PropTypes.string.isRequired,
 };
 
+components.Layout.propTypes = {
+  children: PropTypes.node,
+};
+
+components.Layout.defaultProps = {
+  children: null,
+};
+
 describe('use-react-router-breadcrumbs', () => {
   describe('Valid routes', () => {
     it('Should render breadcrumb components as expected', () => {
@@ -314,6 +331,26 @@ describe('use-react-router-breadcrumbs', () => {
       expect(breadcrumbs).toBe('Home / One / TwoCustom / ThreeCustom');
     });
 
+    it('Should allow layout routes', () => {
+      const routes = [
+        {
+          element: <components.Layout />,
+          children: [
+            {
+              path: 'about',
+              breadcrumb: 'About',
+            },
+          ],
+        },
+        {
+          index: true,
+          breadcrumb: 'Home',
+        },
+      ];
+      const { breadcrumbs } = render({ pathname: '/about', routes });
+      expect(breadcrumbs).toBe('Home / About');
+    });
+
     it('Should use the breadcrumb provided by parent if the index route dose not provide one', () => {
       const routes = [
         {
diff --git a/src/index.tsx b/src/index.tsx
index 0fa1c72..f5233f6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -134,7 +134,7 @@ function flattenRoutes(
   parentPath = '',
 ): BreadcrumbsRouteBranch[] {
   routes.forEach((route, index) => {
-    if (typeof route.path !== 'string' && !route.index) {
+    if (typeof route.path !== 'string' && !route.index && !route.children?.length) {
       throw new Error(
         'useBreadcrumbs: `path` or `index` must be provided in every route object',
       );