react-router:如何禁用<Link>，如果它处于活动状态? [英] react-router: How to disable a <Link>, if its active?

问题描述

如何在 react-router 中禁用 (如果其 URL 已激活)?例如.如果我的 URL 在点击 时不会改变，我想完全阻止点击或呈现 而不是 <;链接>.

How can I disable a <Link> in react-router, if its URL already active? E.g. if my URL wouldn't change on a click on <Link> I want to prevent clicking at all or render a <span> instead of a <Link>.

我想到的唯一解决方案是使用 activeClassName(或 activeStyle)并设置 pointer-events: none;，但我更愿意使用适用于 IE9 和 IE10 的解决方案.

The only solution which comes to my mind is using activeClassName (or activeStyle) and setting pointer-events: none;, but I'd rather like to use a solution which works in IE9 and IE10.

推荐答案

我不会问你为什么想要这种行为，但我想你可以包装 在您自己的自定义链接组件中.

I'm not going to ask why you would want this behavior, but I guess you can wrap <Link /> in your own custom link component.

<MyLink to="/foo/bar" linktext="也许链接也许是跨度" route={this.props.route}/>

class MyLink extends Component {
    render () {
        if(this.props.route === this.props.to){
            return <span>{this.props.linktext}</span>
        }
        return <Link to={this.props.to}>{this.props.linktext}</Link>
    }
}

(ES6，但您可能已经大致了解了...)

(ES6, but you probably get the general idea...)

这篇关于react-router:如何禁用<Link>，如果它处于活动状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！