react-router:如果激活<Link>,如何禁用它？

Question

<Link>如果其URL已经激活,如何禁用react-router？例如,如果我的URL在点击时不会改变<Link>我想要阻止点击或渲染<span>而不是a <Link>.

我想到的唯一解决方案是使用activeClassName(或activeStyle)和设置pointer-events: none;,但我更喜欢使用在IE9和IE10中运行的解决方案.

Answer 1

您可以使用CSS的pointer-events属性.它适用于更多浏览器.例如你编码:

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;
}

链接到源:如何禁用链接

Answer 2

我不会问为什么你会想要这种行为,但我想你可以包装<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,但你可能会得到一般的想法...)

Answer 3

另一种可能性是，如果已经在同一路径上单击，则禁用单击事件。这是适用于react-router v4的解决方案。

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';

class SafeLink extends Component {
    onClick(event){
        if(this.props.to === this.props.history.location.pathname){
            event.preventDefault();
        }

        // Ensure that if we passed another onClick method as props, it will be called too
        if(this.props.onClick){
            this.props.onClick();
        }
    }

    render() {
        const { children, onClick, ...other } = this.props;
        return <Link onClick={this.onClick.bind(this)} {...other}>{children}</Link>
    }
}

export default withRouter(SafeLink);

然后，您可以将链接用作（其他任何道具Link都可以使用）：

<SafeLink className="some_class" to="/some_route">Link text</SafeLink>

Answer 4

这对我有用：

<Link to={isActive ? '/link-to-route' : '#'} />