如何在React中禁用链接？

1. 禁用 React 中的链接
2. 通过呈现不同的元素禁用链接
3. 使用 event.preventDefault 禁用链接
4. 将内联样式添加到“禁用”链接
5. 结语

禁用 React 中的链接

将指针事件 CSS 属性设置为 none 以禁用 React 中的链接。

当链接的指针事件属性设置为 none 时，链接将被禁用。

import {useState} from 'react';
import {BrowserRouter as Router, Link} from 'react-router-dom';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <Router>
      <div>
        <Link style={{pointerEvents: count === 0 ? '' : 'none'}} to="/">
          Home
        </Link>

        <br />
        <br />

        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    </Router>
  );
}

效果如下：

结语

以上就是关于如何在 React 中禁用链接的实现方法，希望对大家有用。