React RouterのLinkコンポーネントを使用して、アプリのページ遷移を処理しています。
私のアプリは、ドキュメントレベルのリンクでイベントを定義するいくつかのスクリプト（つまり、Googleタグマネージャー）を含む外部Webページに含まれています。
これにより、リンクイベントとの競合が発生します。リンクをクリックすると、ページは常に再読み込みされます。
onClickコールバックを使用してLinkコンポーネントでの伝播を停止しようとしましたが、運がありませんでした。 <Link onClick={(e) => { e.stopPropagation(); }} [...]>...</Link>
リンクイベントもドキュメントレベルで定義されているので、外部イベントを停止する方法がわかりません。
これに関する手がかりはありますか？
ありがとうございました ！
私は自分のアプリの1つでまったく同様の問題に直面しました。解決策は、react-router <Link /> component可能であれば使用を避けることだと思います。
<Link />コンポーネントを使用する代わりに、次のwithRouter()提供するHOCを使用しましたreact-router。
何を書きましたか ：
Class MyComponent extends React.Component{
<Link onClick={(e) => { e.stopPropagation(); }} [...]>
...
</Link>
}
export default MyComponent;
に置き換えることができます：
Class MyComponent extends React.Component{
navigate = (event, location) => {
event.preventDefault();
this.props.history.push(location);
}
<a onClick={(e, href) => { this.navigate(e, href) }} [...]>
...
</a>
}
export default withRouter(MyComponent);
これにより、リンクがドキュメントレベルで他のイベントをキャッチし、<Link />コンポーネントと同じ結果を達成するのを防ぐことができます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加