Question

我正在使用react-bootstrap组件（卡）。单击附件链接时，我想重定向到“ / abc：id”。但是，当单击除“附件”之外的卡片上的任意位置时，希望重定向到“ / xyz”，同时重定向到“ / xyz”。

 <Card
   className={classes.style1}
     onClick={() => history.push({
     pathname: '/xyz'
   })}
 >
   <Card.Body>
      <Link to={'/abc'+id} className="text-info">
         <i className="fas fa-paperclip" />
          <span> Attachment</span>
      </Link>
    </Card.Body>
</Card>

Answer 1

您可以stopPropagation，因为目前/xyz之后是/abc:id。

<Link
  to={'/abc'+id}
  className="text-info"
  onClick={e => e.stopPropagation()}
>

stopPropagation阻止事件冒泡事件链。您可以检查this answer。

或者您可以将Card包裹在Link中，然后从Card中删除onClick。

<Link
  to={{
    pathname: '/xyz',
  }}
>
  <Card className={classes.style1}>
    <Card.Body>
      <Link to={`/abc${id}`} className="text-info">
        <i className="fas fa-paperclip" />
        <span> Attachment</span>
      </Link>
    </Card.Body>
  </Card>
</Link>

Answer 2

请尝试这个，然后问是否有任何组件在该路线上呈现

<Link to={`/abc${id}`} className="text-info">
        <Card.Body>
         <i className="fas fa-paperclip" />
          <span> Attachment</span>
       </Card.Body>
 </Link>

反应路由器链接

2 个答案: