react-router：如果 <Link> 处于活动状态，如何禁用它？

Question

如果它的 URL 已经激活，我如何在 react-router 中禁用 <Link> ？例如，如果我的 URL 在点击时不会改变 <Link> 我想完全阻止点击或呈现 <span> 而不是 <Link>

我想到的唯一解决方案是使用 activeClassName （或 activeStyle ）并设置 pointer-events: none; 而我更喜欢使用解决方案IE9 和 IE10。

原文由 Pipo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我不会问您为什么想要这种行为，但我想您可以将 <Link /> 包装在您自己的自定义链接组件中。

<MyLink to="/foo/bar" linktext="Maybe a link maybe a span" 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，但你可能明白了大概的意思……）

原文由 dannyjolie 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 CSS 的 pointer-events 属性。这适用于大多数浏览器。例如你的 JS 代码：

 class Foo extends React.Component {
  render() {
    return (
      <Link to='/bar' className='disabled-link'>Bar</Link>
    );
  }
}

和CSS：

 .disabled-link {
  pointer-events: none;
}

链接：

• 指针事件 CSS 属性
• 如何禁用 HTML 链接

附件中的 如何禁用 HTML 链接 的答案建议同时使用 disabled 和 pointer-events: none 以获得最大的浏览器支持。

 a[disabled] {
    pointer-events: none;
}

链接到源： 如何禁用链接

原文由 Denis Bubnov 发布，翻译遵循 CC BY-SA 4.0 许可协议