Dealing with Button as a NavLink of react router gives a react warning

[sharno]

Steps

Add a NavLink from react-router to a button, ex:
<Button as={NavLink} to={"/members/" + user.id}>Click</Button>

Expected Result

no warnings

Actual Result

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

Check the render method of `Button`.
    in NavLink (created by Button)
    in Button (at MembersPendingAssignments.js:35)

Version

0.75.1

Testcase

https://codesandbox.io/s/8xm89o4j3l

Is it a bug or I shouldn't use the button this way? Any alternatives to get a button working as a link that changes in styling or should I manage the styling manually and use just a Link instead?

[brianespinosa]

@sharno in your codesandbox example your App component is written as a stateless functional component. I think if you write it as a class it should work.

[sharno]

@brianespinosa It seems not to be the case, I updated the same codesandbox to be a class component and it's still giving the same error.
The warning is obviously not pointing to the App component anyway. It's pointing to the render method of Button.

[layershifter]

@sharno Your issue is correct, Button uses refs inside it and this means that it currently can't accept stateless components as as.

This will be solved finally by #1879. The simpliest workarond will be wrap NavLink to the class component or use HOC.

[sharno]

Thanks a lot @layershifter .. will use HOC for now until it's fixed then. I really appreciate your and other contributors' work on Semantic UI React here, it's really elegant and I use it in most of my work.

[brianespinosa]

@sharno so sorry about that. I looked at your codesandbox too quickly. And thanks for catching that @layershifter.

[dknell]

@layershifter @brianespinosa Was this ever fixed? I'm using 0.77.2 and still getting this error

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

Check the render method of `Button`.
    in NavLink (created by Button)
    in Button (created by LeftNav)
    in Unknown (created by _class)
    in _class (created by LeftNav)
    in LeftNav
    in div
    in Router (created by BrowserRouter)
    in BrowserRouter

when rendering this button:

<Button primary as={NavLink} to="/login">Login</Button>

[X-Tender]

Can someone show a HOC solution?

[brianespinosa]

To update everyone who might be landing on this duplicate issue, this should be handled in #2306 which is a replacement for #1879.

@dknell this is still not resolved yet.