React Router v4のReactアプリの外で履歴インスタンスにアクセスするにはどうすればよいですか？

Question

私は外部スクリプトファイルを共有するReactアプリを持っており、vanilla JSで全社的なヘッダーを構築しています。そのヘッダーには、それが呼び出されているアプリケーションのルートに動的にバインドされたロゴがあります（location.origin）。

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(); 

ではどのように、ルータV4（react-router-dom）を反応させることができる：あなたがルートを設定しているところはどこでもbrowserHistoryへのアクセスが発生するため

クリックしてナビゲーションをキャプチャし、代わりにルータV3を反応させるの使用は、前にささいなましたコンポーネントのどこかでリスナーをバインドせずにprops.historyを使用してこれを実現しますか？

Answer 1

あなたが作成してルータに渡す履歴オブジェクトをエクスポートしてから、browserHistoryの代わりに直接使用するといいと思います。

// app.js 

import { Router } from 'react-router' 
import createBrowserHistory from 'history/createBrowserHistory' 

export const myHistory = createBrowserHistory() 

<Router history={myHistory}> 
    <App/> 
</Router> 

// header.js 

import { myHistory } from './app.js'; 

function captureLogoClick() { 
    const logoLink = document.querySelector('#company-header .logo a'); 

    if(logoLink) { 
    logoLink.addEventListener('click', (e) => { 
     e.preventDefault(); 
     myHistory.push('/'); 
    }); 
    } else { 
    // Resource hasn't loaded yet 
    setTimeout(captureLogoClick, 100); 
    } 
} 
captureLogoClick();