Vfrdtyky

How to use hoist-non-react-statics with withRouter

I am adding a static method in Feedback component.

This was my original code. I am trying to use new changes in Context API (react v 16.6)

Feedback.contextType = AppContext;



export default withRouter( Feedback );

This works fine, but I am getting the below warning in console.

Warning: withRouter(Feedback): Function components do not support
contextType.

So to fix the warning I used the method proposed by Dan here. Its also mentioned in react docs

So I have this code now which is not working.

Imported the hoist-non-react-statics

import {Link, withRouter} from 'react-router-dom';

import hoistNonReactStatics from 'hoist-non-react-statics';

And exported the component like this

Feedback.contextType = AppContext;

hoistNonReactStatics( Feedback, withRouter(Feedback) );



export default Feedback;

but for some reason router info (history, match etc) is not populated in props

Any pointers why its not working?

The second snippet isn't supposed to work because withRouter(Feedback) isn't exported from the module.

As linked issue explains, the problem was that hoist-non-react-statics wasn't treated contextType static property correctly. This has been fixed in latest hoist-non-react-statics version. Since react-router uses older hoist-non-react-statics version as a dependency, this could be fixed in-place:

Feedback.contextType = AppContext;



export default Object.assign(withRouter(Feedback), { contextType: undefined });

Or:

Feedback.contextType = AppContext;



const FeedbackWithRouter = withRouter(Feedback);

delete FeedbackWithRouter.contextType;

export default FeedbackWithRouter;

Or:

export default withRouter(Feedback);



Feedback.contextType = AppContext;