Javascript react路由器：如何禁用a<；链接>；，如果它是活动的？

如果react路由器的URL已处于活动状态，如何禁用该路由器中的

？例如，如果我的URL在点击

时不会改变，我想阻止点击，或者呈现

而不是

---

我想到的唯一解决方案是使用

activeClassName

（或

activeStyle

）并设置

指针事件：无，但我更愿意使用在IE9和IE10中工作的解决方案。
我不想问您为什么想要这种行为，但我想您可以在自己的自定义链接组件中包装


类MyLink扩展组件{
渲染（）{
if（this.props.route==this.props.to）{
返回{this.props.linktext}
}
返回{this.props.linktext}
}
}

（ES6，但您可能已经了解了大概的想法…
我认为您应该将分配到=null以设置禁用链接


请参见此处的示例
另一种可能性是，如果已在同一路径上单击，则禁用单击事件。这里有一个与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);

所有的具有禁用能力的善

从“React”导入React”//v16.3.2
从“react router dom”导入{withRouter，NavLink}；//v4.2.2
导出常量链接=带路由器（功能链接（道具）{
const{children，history，to，staticContext，…rest}=props；
返回
{history.location.pathname==to？
{儿童}
:
{儿童}
}
});
您可以使用CSS的
指针事件
属性。这将适用于大多数浏览器。例如，您的JS代码：

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

链接：





附件中的答案建议同时使用
禁用
和
指针事件：无
，以获得最大的浏览器支持

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

链接到来源：
这对我很有用：

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

React路由器的
路由
组件必须基于当前路由呈现内容。虽然
组件
通常仅用于在匹配期间显示组件，但
子组件
接受
（{match}）=>{return}
回调，该回调可以在路径不匹配的情况下渲染匹配上的大小写

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

我创建了一个NavLink类，该类用跨距替换链接，并在其
至
路由处于活动状态时添加一个类

class NavLink extends Component {
  render() {
    var { className, activeClassName, to, exact, ...rest } = this.props;
    return(
      <Route
        path={to}
        exact={exact}
        children={({ match }) => {
          if (match) {
            return <span className={className + " " + activeClassName}>{this.props.children}</span>;
          } else {
            return <Link className={className} to={to} {...rest}/>;
          }
        }}
      />
    );
  }
}

类导航链接扩展组件{
render（）{
var{className，activeClassName，to，exact，…rest}=this.props；
返回(
{
如果（匹配）{
返回{this.props.children}；
}否则{
返回；
}
}}
/>
);
}
}

然后像这样创建一个导航链接

<NavLink to="/dashboard" className="navlink" activeClassName="active">



做了类似的事情，但仍然允许用户点击链接并推送历史记录。
基于nbeuchat的答案和组件-我为我的项目创建了一个自己改进的组件版本，它覆盖了react router的链接组件

在我的例子中，我必须允许将一个对象传递给
to
prop（就像本机
react router dom
链接所做的那样），我还添加了一个
搜索查询
和
哈希
的检查，以及
路径名

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Link as ReactLink } from 'react-router-dom';
import { withRouter } from "react-router";

const propTypes = {
  to: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
  location: PropTypes.object,
  children: PropTypes.node,
  onClick: PropTypes.func,
  disabled: PropTypes.bool,
  staticContext: PropTypes.object
};

class Link extends Component {
  handleClick = (event) => {
    if (this.props.disabled) {
      event.preventDefault();
    }

    if (typeof this.props.to === 'object') {
      let {
        pathname,
        search = '',
        hash = ''
      } = this.props.to;
      let { location } = this.props;

      // Prepend with ? to match props.location.search
      if (search[0] !== '?') {
        search = '?' + search;
      }

      if (
        pathname === location.pathname
        && search === location.search
        && hash === location.hash
      ) {
        event.preventDefault();
      }
    } else {
      let { to, location } = this.props;

      if (to === location.pathname + location.search + location.hash) {
        event.preventDefault();
      }
    }

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

  render() {
    let { onClick, children, staticContext, ...restProps } = this.props;
    return (
      <ReactLink
        onClick={ this.handleClick }
        { ...restProps }
      >
        { children }
      </ReactLink>
    );
  }
}

Link.propTypes = propTypes;

export default withRouter(Link);

从“道具类型”导入道具类型；
从“React”导入React，{Component}；
从'react router dom'导入{Link as ReactLink}；
从“react router”导入{withRouter}；
常量属性类型={
to:PropTypes.oneOfType（[PropTypes.string，PropTypes.func，PropTypes.object]），
位置：PropTypes.object，
子项：PropTypes.node，
onClick:PropTypes.func，
禁用：PropTypes.bool，
staticContext:PropTypes.object
};
类链接扩展组件{
handleClick=（事件）=>{
如果（此.props.disabled）{
event.preventDefault（）；
}
if（typeof this.props.to==='object'）{
让{
路径名，
搜索=“”，
哈希=“”
}=this.props.to；
设{location}=this.props；
//在前面加上？以匹配props.location.search
如果（搜索[0]！=='？'）{
搜索='？'+搜索；
}
如果(
路径名===location.pathname
&&搜索===location.search
&&hash==location.hash
) {
event.preventDefault（）；
}
}否则{
设{to，location}=this.props；
if（to==location.pathname+location.search+location.hash）{
event.preventDefault（）；
}
}
//确保如果我们将另一个onClick方法作为props传递，它也将被调用
if（this.props.onClick）{
this.props.onClick（事件）；
}
};
render（）{
让{onClick，children，staticContext，…restProps}=this.props；
返回(
{儿童}
);
}
}
Link.propTypes=propTypes；
使用路由器（链路）导出默认值；
如果它符合您的设计，请在它上面放一个div，然后操纵z索引。
@UDB将
而不是
呈现出来是完全可以的。这个问题是针对路由器的，不是一般性的问题。但是谢谢你。我明白为什么那会有用。如果标记被替换为或标记，则当单击链接时，链接将变成面包屑列表中的粗体项。单击另一个面包屑链接将重新启用上一次单击的标记，并将粗体+禁用链接状态应用于新单击的链接。使用react router v4，您需要使用
this.props.history.location.pathname
而不是
this.props.route
我还建议使用
{this.props.children}
而不是添加新的道具
linktext
。这样，您就可以真正将此组件用作普通的
链接
组件。此解决方案不可访问。您应该传递
aria disabled=“true”
并将
删除到<
class NavLink extends Component {
  render() {
    var { className, activeClassName, to, exact, ...rest } = this.props;
    return(
      <Route
        path={to}
        exact={exact}
        children={({ match }) => {
          if (match) {
            return <span className={className + " " + activeClassName}>{this.props.children}</span>;
          } else {
            return <Link className={className} to={to} {...rest}/>;
          }
        }}
      />
    );
  }
}

<NavLink to="/dashboard" className="navlink" activeClassName="active">

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Link as ReactLink } from 'react-router-dom';
import { withRouter } from "react-router";

const propTypes = {
  to: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
  location: PropTypes.object,
  children: PropTypes.node,
  onClick: PropTypes.func,
  disabled: PropTypes.bool,
  staticContext: PropTypes.object
};

class Link extends Component {
  handleClick = (event) => {
    if (this.props.disabled) {
      event.preventDefault();
    }

    if (typeof this.props.to === 'object') {
      let {
        pathname,
        search = '',
        hash = ''
      } = this.props.to;
      let { location } = this.props;

      // Prepend with ? to match props.location.search
      if (search[0] !== '?') {
        search = '?' + search;
      }

      if (
        pathname === location.pathname
        && search === location.search
        && hash === location.hash
      ) {
        event.preventDefault();
      }
    } else {
      let { to, location } = this.props;

      if (to === location.pathname + location.search + location.hash) {
        event.preventDefault();
      }
    }

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

  render() {
    let { onClick, children, staticContext, ...restProps } = this.props;
    return (
      <ReactLink
        onClick={ this.handleClick }
        { ...restProps }
      >
        { children }
      </ReactLink>
    );
  }
}

Link.propTypes = propTypes;

export default withRouter(Link);