Реагируйте validateDOMNesting правильной структуры

Question

Как у меня есть элемент, который при нажатии перенаправляет вас на другую страницу, но если вы щелкаете на определенной вещи c внутри элемента, она делает что-то еще.

Это то, что я пробовал :

<div onClick={routeToPage1}>
  <p>bleh</p>
  <Link to='/page2'>Goto Page 2</Link>
</div>

Я не могу сделать родительский элемент <Link>, потому что получу эту ошибку (хотя она работает).

Проблема с кодом выше состоит в том, что он все еще маршрутизирует на страницу 1, когда я нажимаю на ссылку.

Хотя, если я переключу код на это:

const routeToPage2 = e => {
  e.stopPropagation()
  history.push('/page2')
}

<div onClick={routeToPage1}>
  <p>bleh</p>
  <p onClick={routeToPage2}>Goto Page 2</p>
</div>

Это работает, но я чувствую, что это немного хакерски ... если это не так.

Оцените ввод.