我尝试了 Tharaka 建议的解决方案，但对我不起作用。看起来 react-leaflet 的 Popup 正在使用它自己的上下文，从而阻止了从更高级别传递的上下文。然而，受到这个解决方案的启发，我想出了另一个，非常简单且基于组合原理。

我创建了 RouterForwarder 组件

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class RouterForwarder extends Component {
  getChildContext() {
    return this.props.context
  }

  render() {
    return <span>{this.props.children}</span>
  }
}

RouterForwarder.childContextTypes = {
  router: PropTypes.object.isRequired,
}

RouterForwarder.propTypes = {
  context: PropTypes.object.isRequired,
}

export default RouterForwarder

然后按以下方式在我的组件（呈现地图、标记、弹出窗口和链接的组件）中使用它：

import RouterForwarder from './RouterForwarder'

class MyComponent extends Component {

  render() {
    return (
    ...
      <Popup>
        <RouterForwarder context={this.context}>
          <Link to={'my destination'}>Go to My Destination</Link>
        </RouterForwarder>
      </Popup>
    ...)
  }
}

MyComponent.contextTypes = {
  router: PropTypes.object,
}

我对这个答案不是 100% 确定。但无论如何我都会尝试，因为我认为至少它可以为将来尝试解决此问题的任何人提供一些启示。

我在GitHub 存储库中从这个问题中得到了第一个提示react-leaflet。根据那个和你的错误，问题似乎是 Popup 无法访问routerfrom ，context因为context它没有以它们呈现的方式传递到 Popup 中。所以如果我们可以明确地将上下文传递给 Popup，我们应该能够解决这个问题。

然后我在这个StackOverflow 答案中找到了一种将上下文显式传递到组件的方法。有了这个，我认为您应该能够使用如下的 HoC（高阶组件）来解决您的问题。

这是将上下文注入组件的 HoC：

function withContext(WrappedComponent, context){

  class ContextProvider extends React.Component {
    getChildContext() {
      return context;
    }

    render() {
      return <WrappedComponent {...this.props} />
    }
  }

  ContextProvider.childContextTypes = {};
  Object.keys(context).forEach(key => {
    ContextProvider.childContextTypes[key] = React.PropTypes.any.isRequired; 
  });

  return ContextProvider;
}

假设您在名为 MapMaker 的组件中使用 Popup。然后你可以router像这样使用 HoC将上下文注入到 Popup 中。

class MapMaker extends React.Component {

  //......

  // This make sure you have router in you this.context
  // Also you can add any other context that you need to pass into Popup
  static contextTypes = {
    router: React.PropTypes.object.isRequired
  }

  render(){

    const PopupWithContext = withContext(Popup, this.context);

    return (
      //..... your JSX before Popup
      <PopupWithContext/> // with your props
      //..... your JSX after Popup
    );
  }

}

我的解决方案（这是一种解决方法，但效果很好，我看不到任何缺点）：

我通过使用解决了（在带有redux 的react router v3 中）

<a onClick={() => goTo(params)} />

而goTo定义在

const mapDispatchToProps = (dispatch) => bindActionCreators({
  goTo(id) {
    return push(`/<url>/${id}`); // push from 'react-router-redux'
  },
}, dispatch);