React-Router Link

Question

I am using react-bootstrap components (Card). I want to get redirected to '/abc:id' when clicked on the attachment link. But getting redirected to '/xyz' while wanting it to redirect '/xyz' when clicked on the anywhere on card but Attachment.

 <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

You can stopPropagation , as currently it is going to /xyz after /abc:id .

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

stopPropagation stops the event from bubbling up the event chain. You can check this answer .

---

Or you can wrap your Card in a Link and remove onClick from Card.

<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

Try this one, please, and the question if any component renders on that route

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