React-Router 鏈接

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 ，因為目前它會在/abc:id之后進入/xyz 。

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

stopPropagation阻止事件在事件鏈上冒泡。 你可以檢查這個答案。

---

或者您可以將您的Card包裝在一個Link中並從卡中刪除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>