Ссылка React-Router

Question

Я использую компоненты react- bootstrap (Card). Я хочу, чтобы меня перенаправляли на '/ ab c: 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 останавливает всплытие события в цепочке событий. Вы можете проверить этот ответ .

Или вы можете заключить 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>