[解決済み] validateDOMNesting警告React

質問

全体としてクリックできるReactコンポーネントを持っていますが、中にボタンも入っています。

つまり、次のようなものです。

<Link to={'/path1'}>
  ...
  <Link to={'path2'} />
  ...
</Link> 

これは私が望む動作ですが、この警告が表示されます。

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See SearchResult > Link > a > ... > Link > a.

どの程度深刻に受け止めればいいのか、また回避策はあるのか？

解決方法は？

アンカータグのネスト（これは <Link /> に変換されます)は、HTMLでは禁止されています。仮に望ましい結果が得られたとしても、それはあなたのブラウザが賢く、独自の回避策を持っているからにほかなりません。しかし、その動作はすべてのブラウザやプラットフォームで保証されるものではありません。

どの程度深刻に受け止めればいいのか？

上記の通り、かなり深刻と言えるでしょう。

回避策としては、どのようなものがあるでしょうか？

以下は回避策ではなく、私が考える「正しい実装」です。

ラッピング要素にナビゲーションをプログラム的に実装し、その上で <Link /> をボタンに使用します。だから、次のようなものだ。

navigate = () => {
  //push "path1" to history
}

render() {
  return(
    <div onClick={this.navigate}>
      <Link to="path2">Some button</Link>
      <Link to="path3">Some button</Link>
    </div>
  );
}

React Routerでのプログラムによるナビゲーションの詳細については、以下のリンクのいずれかを参照してください。

• React Router v1-v3用です。 リンク
• React Router v4用です。 リンク