Как сделать так, чтобы кнопка внутри ссылки не запускала перенаправление ссылки

Question

У меня есть div на моей странице, который отображается несколько раз с разными teamObj s. Я делаю перенаправление на полную страницу для этой команды, используя Link.

 <div className="team-card" key={teamObj.id}>
    <Link to={`${this.props.links.teams + "/" + teamObj.id}`}>
      <div className="row no-gutter flex" style={{ width: '100%', height: '100%' }}>
        <div className="col-sm-3 team-card-column">
            {this.renderTeamTitle(teamObj)}
        </div>
        <div className="col-sm-9">
          <div className="row" style={{ margin: '0 auto' }}>
            {teamLogo ?
              <>
                <div className="col-8 team-card-column">
                  <TeamInfoBars teamStats={teamStats} />
                </div>
                <div className="col-4 team-card-column">
                  <img className='team-card-img' src={teamLogo.url} alt="" />
                </div>
              </>
              :
              <div className="team-card-column">
                <TeamInfoBars teamStats={teamStats} />
              </div>
            }
          </div>
        </div>
      </div>
    </Link>
  </div >

Внутри renderTeamTitle я показываю кнопку, которая позволяет пользователю присоединиться к команде. Раздел renderTeamTitle, который отображает эту кнопку, находится ниже:

<div className="col-3 col-sm-12">
      {(this.props.user && !this.inTeam(teamObj.id)) &&
        <button
          onClick={() => {
            this.joinTeam(teamObj);
          }}
          className="btn btn-success round-me join-team-btn-small raise"
        >
          Join
        </button>
      }
</div>

Однако, поскольку эта кнопка является дочерним элементом Link, нажатие на нее запускает joinTeam, а также перенаправление Link . Естественно, я не хочу, чтобы кнопка выполняла последнее поведение. Что было бы наиболее элегантным способом исправить это?

Answer 1

Постарайтесь остановить все другие события, кроме вашего. Это должно сработать:

onClick={event => {
    event.preventDefault();
    event.stopPropagation();
    this.joinTeam(teamObj);
}}