如何将输入链接到React Router链接

Question

我正在一个react.js项目上，该项目需要一个图像按钮或一个输入到React Router链接的输入，但我似乎找不到解决方法。

这是我的代码：

render: function() {
return (
  <div className="Item" style={{backgroundImage: 'url(' +    this.props.poster + ')'}} >
    <div className="overlay">
      <div className="title">{this.props.title}</div>
      <div className="rating">{this.props.score} / 10</div>
      <div className="plot">{this.props.overview}</div>
      <div className="play"><input className="button" type="image" src="www.url.to/the/image"></input></div>
      <Link to={`/${this.props.id}`} id="link"/>
      <ListToggle />
    </div>
  </div>
 );
}

Answer 1

您需要将所有内容包起来Link：

render: function() {
    return (
        <Link to={`/${this.props.id}`} id="link">
            <div className="Item" style={{backgroundImage: 'url(' +    this.props.poster + ')'}} >
                <div className="overlay">
                    <div className="title">{this.props.title}</div>
                    <div className="rating">{this.props.score} / 10</div>
                    <div className="plot">{this.props.overview}</div>
                    <div className="play"><input className="button" type="image" src="www.url.to/the/image"></input></div>
                    <ListToggle />
                </div>
            </div>
        </Link>
    );
}