fix: support layout routes in v6 (#35)

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

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",

src/index.test.js

@@ -65,6 +65,7 @@ const components = {
       return <span>Class</span>;
     }
   },
+  Layout: React.memo(({ children }) => <div>{children}</div>),
 };
 
 const getHOC = () => {
@@ -129,15 +130,23 @@ components.Breadcrumbs.propTypes = {
   routes: PropTypes.arrayOf(
     PropTypes.oneOfType([
       PropTypes.shape({
-        path: PropTypes.string.isRequired,
+        path: PropTypes.string,
         breadcrumb: PropTypes.oneOfType([
           PropTypes.node,
           PropTypes.func,
           PropTypes.object,
         ]),
       }),
       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 = [
         {

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',
       );