React Router - 如何禁用链接

在本教程中，我们将通过实例来学习如何在React路由器中禁用链接。

考虑一下，我们的React应用程序中有一个链接。

import  React from "react";
import {Link} from 'react-router-dom';

function App {
    return (
      <Link to='/support' >Support us</Link>
    );
}

export default App;

要在React路由器中禁用一个链接，请在<Link> 组件的样式属性中添加pointerEvents: "none" 。

下面是一个例子。

import  React from "react";
import {Link} from 'react-router-dom';

function App {
    return (
      <Link to='/support' style={{pointerEvents: "none"}} >
        Support us
      </Link>
    );
}

export default App;

当我们把pointerEvents属性设置为一个值"none" ，它就会禁用链接，并且不响应任何光标或触摸事件。

如果你使用的是CSS类名，你可以在Link 组件的CSS类名中加入pointer-events: none 。

import  React from "react";
import {Link} from 'react-router-dom';

function App {

    return (
      <Link to='/support' className="disable-link" >
        Support us
      </Link>
    );
}

export default App;

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

使用e.preventDefault()来禁用该链接

我们可以在React router中禁用链接，方法是在onClick 事件内的event 对象上调用preventDefault()方法。

event.preventDefault() 方法可以阻止浏览器的默认动作，所以它也可以禁用链接。

下面是一个例子。

import  React from "react";
import {Link} from 'react-router-dom';

function App {

    return (
     <div>
       <Link to='/support' onClick={(e)=> e.preventDefault()} >
        Support us
      </Link>
     </div>
    );
}
export default App;

我们还可以在某个特定条件下有条件地禁用链接。

这里有一个例子。

import  React from "react";
import {Link} from 'react-router-dom';

function App {
 const [active, setActive] = useState(false);

    return (
     <div>
     {active
     ? <Link to='/support' OnClick={(e)=> e.preventDefault()} >
        Support us
      </Link>
     :  <Link to='/support'>Support us</Link>
     }
     </div>
    );
}
export default App;

在上面的例子中，我们使用了三元操作符来呈现两个不同的链接，一个是禁用链接，一个是激活链接。

{active
  ? <Link to='/support' OnClick={(e)=> e.preventDefault()} >
       Support us
     </Link>
  :  <Link to='/support'>Support us</Link>
}

如果active 状态是true ，它就渲染第一个链接，否则，它就渲染第二个链接。