ReactJS + React Router：如何禁用來自React-Router的鏈接 <Link> ？

Question

使用React-Router的鏈接，我進行了如下設置：

<Link to={...}>{this.props.live? "Live": "Not Live"}</Link>

如果this.props.live被傳入，我只想顯示一個文本“ Live”，它將直接指向一個新頁面。 如果未傳入this.props.live顯示文本“ Not Live”，但要從中刪除超鏈接/停用/禁用它。

有可能這樣做嗎？ 我嘗試了<div style={{pointerEvents: "none"}}>Not Live</div> ，但是不起作用。

將接受並接受答案。 謝謝！

Answer 1

你應該做這個：

let component;

component=this.props.live? <Link to={...}> Live </Link>: <div> Not Live </div>
 render() {
    {component}
  }

干杯：）

Answer 2

this.props.live
? <Link to={...}> Live </Link>
: <div> Not Live </div>

Answer 3

您可以使用evt.preventDefault()阻止頁面重定向

class MyComponent extends React.Component {
  constructor(props) {
    this.handleLinkClick = this.handleLinkClick.bind(this);
  }
  handleLinkClick(evt) {
    if (!this.props.live) {
      evt.preventDefault(); // will prevent redirection
    }
  }
  render() {
    <Link onClick={this.handleLinkClick} to={...}>
      {this.props.live? "Live": "Not Live"}
    </Link>
  }
}

速記但有爭議的版本

<Link onClick={evt => !this.props.live && evt.preventDefault()} to={...}>
  {this.props.live? "Live": "Not Live"}
</Link>

請參閱API文檔