Javascript 如何使用React Router v4访问React应用程序外部的历史记录实例？

我有一个React应用程序，它共享一个外部脚本文件，用vanilla JS构建公司范围的头文件。在该标题中是一个徽标，它动态绑定到调用它的任何应用程序的根（

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

，如何实现这一点？

我认为您可以导出创建的历史对象并传递到路由器，然后直接使用它来代替

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

//app.js
从“react Router”导入{Router}
从“历史记录/createBrowserHistory”导入createBrowserHistory
export const myHistory=createBrowserHistory（）
//header.js
从“/app.js”导入{myHistory}；
函数captureLogoClick（）{
const logoLink=document.querySelector（“#company header.logo a”）；
如果（logoLink）{
logoLink.addEventListener（'单击'，（e）=>{
e、 预防默认值（）；
myHistory.push（'/'）；
});
}否则{
//资源尚未加载
设置超时（captureLogoClick，100）；
}
}
captureLogoClick（）；

我应该澄清一下，我使用的是v4中的

react router dom

——它看起来不接受历史道具：-/Ok，备选方案：只使用浏览器的本机window.history.pushState。如果您想要历史记录包提供的兼容性，我认为您可以使用

createBrowserHistory（）

，而不用担心将其绑定到任何地方或与react router共享。这是一种在黑暗中拍摄，但试一试？我想这不会有问题的。本地历史不会引发重播。我想如果没有访问路由器中的历史单例，它将无法正常工作。好吧，我将回到我最初的答案。检查源代码，你会发现使用基本路由器代替它很容易。Boom，访问您的全局历史对象。我完全同意，我想我只是更想使用

-dom

包，以防添加新功能。