1

外部スクリプト ファイルを共有して、バニラ 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か?

4

1 に答える 1