Use new forwardRef API in withRouter HOC

React 16.3 is out and now we have an “official” way to pass ref through HOCs with new forwardRef API. Would you like to use it as a replacement for wrappedComponentRef prop to make wrapping transparent for parent components?

Can submit a PR.

[mjackson]

Yes, we should update withRouter to use the React.forwardRef API. As @pshrmn noted above, we can’t do it in 4.x because it is compatible with React 15 and the forwardRef API was introduced in 16.3.

We will fix this in version 5 when we upgrade our dep to React 16.7+.

[pandaiolo]

As suggested in original SO question, here is a version built on @ranjith-s work, a bit simpler and that supports displayName which can be useful in tests or dev tools.

const withRouterAndRef = Wrapped => {
  const WithRouter = withRouter(({ forwardRef, ...otherProps }) => (
    <Wrapped ref={forwardRef} {...otherProps} />
  ))
  const WithRouterAndRef = React.forwardRef((props, ref) => (
    <WithRouter {...props} forwardRef={ref} />
  ))
  const name = Wrapped.displayName || Wrapped.name
  WithRouterAndRef.displayName = `withRouterAndRef(${name})`
  return WithRouterAndRef
}