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

Question

Using React-Router's Link, I have a set up like so:

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

Where if this.props.live gets passed in, I would like to simply display a text "Live" which will direct to a new page. If this.props.live is not passed in, want to display the text "Not Live" but remove the hyperlink from it/deactivate/disable it.

Is it possible to do so? I tried <div style={{pointerEvents: "none"}}>Not Live</div> , but does not work.

Will be upvoting and accepting answer. Thank you!

Answer 1

You should do this:

let component;

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

Cheers:)

Answer 2

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

Answer 3

You can prevent the page to be redirected using 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>
  }
}

Shorthand but controversial version

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

See the API docs