React Router v4를 사용하여 React 앱 외부에서 History 인스턴스에 액세스하려면 어떻게해야합니까?

Question

바닐라 JS로 회사 차원의 헤더를 만들기 위해 외부 스크립트 파일을 공유하는 React 앱이 있습니다. 이 헤더에는 어떤 응용 프로그램이든 그것을 호출하는 루트에 동적으로 바인딩 된 로고가 있습니다 (location.origin). 어떻게, 반작용 라우터 V4와

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

내가 반응 - 라우터 dom`를 V4에서`사용하고 있음을 명확히해야