Question

如果反应路由器的URL已经激活，如何在反应路由器中禁用<Link>？例如。如果<Link>点击后我的网址不会改变，我想阻止点击或呈现<span>而不是<Link>。

我想到的唯一解决方案是使用activeClassName（或activeStyle）并设置pointer-events: none;，但我更愿意使用在IE9和IE10中运行的解决方案

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，但你可能会得到一般的想法......）

Answer 2

您可以使用CSS的pointer-events属性。它将与更多浏览器一起使用。例如，您编写代码：

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

和CSS：

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

链接：

建议附加How to disable HTML links的答案，同时使用disabled和pointer-events: none，以最大程度地支持浏览器。

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

链接到源：How to disable Link

Answer 3

另一种可能性是，如果已在同一路径上单击，则禁用click事件。这是与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

所有 React Router NavLink的优点与禁用功能。

import React from "react"; // v16.3.2
import { withRouter, NavLink } from "react-router-dom"; // v4.2.2

export const Link = withRouter(function Link(props) {
  const { children, history, to, staticContext, ...rest } = props;
  return <>
    {history.location.pathname === to ?
      <span>{children}</span>
      :
      <NavLink {...{to, ...rest}}>{children}</NavLink>
    }
  </>
});

Answer 5

这对我有用：

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

Answer 6

反应路由器的Route组件具有three different ways可以根据当前路由呈现内容。尽管component最典型地仅用于在比赛中显示组件，但children组件会接受({match}) => {return <stuff/>}回调，即使在路线不匹配。

我创建了一个NavLink类，该类用跨度替换了Link，并在其to路由处于活动状态时添加了一个类。

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">

React Router's NavLink的作用类似，但是仍然允许用户单击链接并推送历史记录。

Answer 7

基于nbeuchat的答案和组件-我创建了自己的改进版本的组件，该版本在我的项目中覆盖了react router's Link组件。

就我而言，我不得不允许将对象传递给to prop（就像本机react-router-dom链接一样），我还添加了对search query和{{1}的检查}和hash

pathname

Answer 8

我认为您应该将设为= null 来设置禁用链接。

请在此处查看示例 https://stackoverflow.com/a/44709182/4787879

Answer 9

如果它适合您的设计，请在其顶部放置一个div，然后操纵z索引。

react-router：如果激活了<link />，如何禁用它？

9 个答案: