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>

can you show me your routes?? – gabriel_tiso Aug 04 '20 at 10:32 — gabriel_tiso, Aug 04 '20 at 10:32

Ajeet Shah · Accepted Answer · 2020-08-04T11:01:43.733

2

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>

edited Aug 04 '20 at 11:01

answered Aug 04 '20 at 10:42

Ajeet Shah

18,551
8
57
87

It works well, but is it the recommended way? Does it have any drawbacks? – Ruturaj More Aug 04 '20 at 10:51
It doesn't have any drawbacks. But it seems better and consistent if you handle both redirection in same manner, using `Link` or `onClick`. I have updated my answer. – Ajeet Shah Aug 04 '20 at 11:04

score 0 · Answer 2 · answered Aug 04 '20 at 10:33

0

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>

answered Aug 04 '20 at 10:33

Anna Vlasenko

916
5
8

I can't do this because I have other things also in , those I haven't mentioned here. And yes on both routes different components are supposed to be rendered. @Anna Vlasenko – Ruturaj More Aug 04 '20 at 10:36

React-Router Link

2 Answers2