Please added feature disabledLink to allow to disable link if not needed

[phatify]

Please update this feature, this will be useful in some cases
, I mentioned an example for usage below:

const configs = [
  { path: '/', breadcrumb: 'Home' },
  { path: '/product', breadcrumb: 'Product', disabledLink: true },
  { path: '/product/add', breadcrumb: 'New Product' },
]

  const breadcrumbs = useBreadcrumbs(configs, { 
    disableDefaults: true 
  });

  return (
    <>
      { breadcrumbs.map((data, i) => {
        const { match, breadcrumb } = data;
        return (
          <BreadcrumbComponent key={match.pathname}>
            {match.disabledLink ?
              <>{breadcrumb}</>
               :
              <Link to={match.pathname}>{breadcrumb}</Link>          
            } 
          </BreadcrumbComponent>                   
        )
      })}
    </>
  )

[icd2k3]

@phatify - all additional pass-through props (props that aren't part of the react-router or use-react-router-breadcrumbs APIs) are included at the root level of the map.

So your code should look something like this instead:

EDIT (disabledLink needs to be nested in a props object within config - I forgot to include this. in the original response)

const breadcrumbs = useBreadcrumbs([
    { path: "/", breadcrumb: "Home" },
    { path: "/product", breadcrumb: "Product", props: { disabledLink: true } },
    { path: "/product/add", breadcrumb: "New Product" }
  ]);

return (
    <>
      { breadcrumbs.map((data, i) => {
        const { match, breadcrumb, disabledLink } = data;
        return (
          <BreadcrumbComponent key={match.pathname}>
            {disabledLink ?
              <>{breadcrumb}</>
               :
              <Link to={match.pathname}>{breadcrumb}</Link>          
            } 
          </BreadcrumbComponent>                   
        )
      })}
    </>
  )

[phatify]

@phatify - all additional pass-through props (props that aren't part of the react-router or use-react-router-breadcrumbs APIs) are included at the root level of the map.

So your code should look something like this instead:

return (
    <>
      { breadcrumbs.map((data, i) => {
        const { match, breadcrumb, disabledLink } = data;
        return (
          <BreadcrumbComponent key={match.pathname}>
            {disabledLink ?
              <>{breadcrumb}</>
               :
              <Link to={match.pathname}>{breadcrumb}</Link>          
            } 
          </BreadcrumbComponent>                   
        )
      })}
    </>
  )

@icd2k3 Have you tried yet? It not works, bro! I got the undefined from console.log(disabledLink)

[icd2k3]

@phatify I forgot to post the route config as well - pass through props have to be placed in a props object. I have edited my original response to reflect this as well.

const breadcrumbs = useBreadcrumbs([
    { path: "/", breadcrumb: "Home" },
    { path: "/product", breadcrumb: "Product", props: { disabledLink: true } },
    { path: "/product/add", breadcrumb: "New Product" }
  ]);

Here's a codesandbox example of the functionality you're looking for I think https://codesandbox.io/s/use-react-router-breadcrumbs-demo-forked-vxhvn?file=/Breadcrumbs.js

[icd2k3]

This props option is also noted in the api section of the readme but might be worth having it's own section if we see more questions like this

[phatify]

@icd2k3 Thanks for your answer. Its saved my time. :)))

[icd2k3]

No problem @phatify and sorry for the confusion - I've adjusted the "advanced" example in the readme slightly to highlight the props object. Closing this issue because it sounds like it solved your issue.