外部スクリプト ファイルを共有して、バニラ JS で全社的なヘッダーを作成する React アプリがあります。そのヘッダーには、それを呼び出しているアプリケーションのルートに動的にバインドされるロゴがあります ( location.origin
)。
クリック ナビゲーションをキャプチャし、代わりに React Router v3 を使用することは、以前は簡単でした。これは、ルートを設定している場所ならどこでも browserHistory へのアクセスが発生するためです。
import { browserHistory } from 'react-router';
function captureLogoClick() {
const logoLink = document.querySelector('#company-header .logo a');
if(logoLink) {
logoLink.addEventListener('click', (e) => {
e.preventDefault();
browserHistory.push('/');
});
} else {
// Resource hasn't loaded yet
setTimeout(captureLogoClick, 100);
}
}
captureLogoClick();
React Router v4 ( react-router-dom
) では、コンポーネント内のどこかにリスナーをバインドして使用せずに、どうすればこれを達成できますprops.history
か?