Unable to pass additional props.

[AudriusDai]

When using typescript I am unable to pass down the additional props to component wrapped in withBreadcrumbs method.

interface CustomProps<T> extends InjectedProps<T> {
    rightNode?: ReactNode;
}

const CustomCrumbsHeader = (props: CustomProps<any>) => {
..
}

export default  withBreadcrumbs(breadcrumbsConfig, { disableDefaults: true })(CustomCrumbsHeader);

// following prop 'rightNode' is NOT accepted.
<DefaultedCustomCrumbsHeader rightNode={null} /> 

error message:

Type '{ rightNode: null; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<InjectedProps<unknown>, never>, any, any>> & Readonly<...> & Readonly<...>'.
  Property 'rightNode' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Pick<InjectedProps<unknown>, never>, any, any>> & Readonly<...> & Readonly<...>'.  TS2322

Question: Am I doing something wrong here? How to properly pass the additional props?

The only way I've found it to work is to proxy the props with spread:

interface CustomPropsNew {
    rightNode?: ReactNode;
}
const A = withBreadcrumbs(breadcrumbsConfig, { disableDefaults: true })(CustomCrumbsHeader);
const B = (props: CustomPropsNew) => <A {...props} />;

export default B;

// 'rightNode' is now accepted.
<DefaultedCustomCrumbsHeader rightNode={null} /> 

Dependencies:

..
"react": "^16.13.1",
"react-router-breadcrumbs-hoc": "^3.2.10",
"react-router-dom": "^5.1.2",
// devDependencies
"typescript": "^3.5.2"
..

[AudriusDai]

As an alternative I was able to use use-react-router-breadcrumbs. It was way easier :)

[icd2k3]

Thanks @AudriusDai - I'll update this repo soon to use the same generated types like use-react-router-breadcrumbs has

[icd2k3]

Should be fixed as of 3.3.0