Breaking change between version 5.0.1 and 5.1.0

[kennethlarkin]

Version

5.1.0

Test Case

upgrading a site between 5.0.1 and 5.1.0 breaks the site.

Steps to reproduce

add a <link> inside a <browserRouter>

let BrowserRouter = ReactRouterDOM.BrowserRouter;
let Link = ReactRouterDOM.Link;

adding a to= doesnt make a difference

return (
<BrowserRouter>
<Link className="nav-link" >Home</Link>

Expected Behavior

link rendered

Actual Behavior

backend.js:6 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of e.
in Unknown (created by e)
in e
in Unknown (created by AppLayout)
in t (created by t)
in t (created by t)
in t (created by AppLayout)
in AppLayout

[support]

👋 @kennethlarkin, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out.
Please feel free to clarify your issue if you think it was closed prematurely.

[kennethlarkin]

Tim, thanks for replying. Not looking for Support I am looking to report a bug. If the code was working on major version 5 it should continue to work on all major version 5 sub versions.

I have included steps to reproduce the bug above and the expected behavior. i have looked at the release notes and this should not have been affected.

[timdorr]

Those steps aren't sufficient, as they don't include detailed enough data. Can you reproduce this on codesandbox.io? At the very least, can you produce a stacktrace that isn't minimized.

[kennethlarkin]

There is already an example on there:
https://codesandbox.io/s/a-simple-react-router-v4tutorial-gtg3e

Change the react-router-dom version to latest and it breaks

[StringEpsilon]

Seems to affect only react <= 16.2.x

With RR 5.1 and React 16.3, it works.

Root cause is most likely
facebook/react#4936
in conjunction with @ryanflorence' patch here:

b5528ed

Given that we still "support" react 15 (and 16.0 - 16.2), this sure is a breakage.

[timdorr]

So, a couple of things there:

• Creating a polyfill there isn't the right approach. It should be a conditional that returns either the component or forwarded component if the API exists.
• On React Redux, We found there was a notable performance degradation when using forwardRef. It would be ideal if it was optional and opt-in.

[mjackson]

I'm confused as to how the forwardRef polyfill in that patch changes anything at all in React 15. It's just the identity function. So before the patch, we had:

function Link(props) {
  // ...
}

export { Link }

And after the patch we have:

let forwardRef = C => C;

const Link = forwardRef((props, ref) => {
  // ...
})

export { Link }

All React 15 sees is a function that takes some props.

Is this line the one that causes the breakage??

[timdorr]

Yep, that's what's doing it.

[mjackson]

Ah, I see. The <LinkAnchor> component is a function component and it's getting a ref. Will fix.

[mjackson]

This was fixed and released in 5.1.1 https://github.com/ReactTraining/react-router/releases/tag/v5.1.1