React-router: Disabled Link

Created on 13 May 2016 · 3Comments · Source: ReactTraining/react-router

I wanted to comment on #1082 but it's locked.

Using

  <Link
    onClick={(e) => !canHasLink ? e.preventDefault() : true}
    style={!canHasLink ? {pointerEvents: 'none'} : {}}
  > IDontThinkSo </Link>

still lets the user see the source code and manually enter the target location into address bar.
Not using the changed style even let's the user right-click the link and open the target in new tab.

If I really want to disable the Link, I need to replace the Link with a flat text likeso, (which can, of course, be wrapped in a component...)

{canHasLink // not so sexy
  ? <Link>YouShallPass</Link>
  : 'YouShallNopePass'}

But all those workarounds are not that elegant... Can we have proper Disabled links that mask any evidences of it being a link but still using the same component for the sake of styles (i.e. remove target url from disabled link)?

Source

ackvf

👍2

Most helpful comment

Right, of course, that's understandable, but what I had on mind actually is that by using disabled on a <Link/> the rendered <a> would be without a target url, ie. effectively disabled. Right now we have to do painful wrappers or render conditionally.

Also I was commenting the fact that the proposed "right" way to do it is actually wrong and should be discouraged, as the user can still redirect to the target url manually.

In my opinion, the only right way to disable an anchor element can't be achieved by using html, but must be implemented in the render, hence my proposal.

ackvf on 15 May 2016

👍33

All 3 comments

There is no support for disabled on <a>. As we're trying to match the API of an anchor as closely as possible, doing this is out-of-scope.

taion on 13 May 2016

Also I was commenting the fact that the proposed "right" way to do it is actually wrong and should be discouraged, as the user can still redirect to the target url manually.

In my opinion, the only right way to disable an anchor element can't be achieved by using html, but must be implemented in the render, hence my proposal.

ackvf on 15 May 2016

👍33

even though this issue is 2 and a half years old,
I believe that this is quite a common behavior that most users would like to have.

according to the way that <a> works, I do think that @ackvf 's solution is the best to fit everybody's interests (and support the intended way of disabling an <a>

the main question is: are you (maintainers) willing to accept it?

p.s: seems like it is even required since 2015: https://github.com/ReactTraining/react-router/issues/1082#issuecomment-160348163