如何使用 React Router v4 访问 React 应用程序之外的历史实例？

Question

我有一个 React 应用程序，它共享一个外部脚本文件以使用 vanilla JS 构建 company-wide header。其中 header 是一个徽标，它动态绑定到调用它的任何应用程序的根 (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 的情况下完成此操作？

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

如何使用 React Router v4 访问 React 应用程序之外的历史实例？

How can I access the history instance outside of React app with React Router v4?

javascript

reactjs

react-router

react-router-v4

react-router-dom