React Router Link 不适用于 LeafletJS

版本：

• 反应路由器-dom 4.1.1
• 反应路由器-redux 5.0.0-alpha.4
• 反应传单 1.1.3
• 传单1.0.3

重现步骤

我创建了一张传单地图。我在其中添加了一些标记。这些标记有弹出窗口。 在每个弹出窗口中我想要一个<Link>

另外，如果有帮助的话，这是我的路由配置：

ReactDOM.render(
  <Provider store={store}>
    <div>
      <AppContainer />
      <ConnectedRouter history={history}>
        <div>
          <MenuContainer />
          <Switch>
            <Route path='/:area/:sport/list' component={ListContainer} />
            <Route path='/:area/:sport/map' component={MapContainer} />
            <Route path='/:area/:sport/rasp' component={RaspContainer} />
            <Route path='/:shortcode/details' component={StationDetailsContainer} />
            <Redirect exact from='/' to='/wellington/paragliding/list' />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </ConnectedRouter>
    </div>
  </Provider>,
  document.getElementById('root')
)

预期行为

我可以看到我的链接，并在弹出窗口打开时单击它。

实际行为

Impossible to see the link. It's not generated.

额外细节

Inside my <MapMode> I use <Map> from leaflet. If I set a <Link> just above the <Map> tag it works. As soon as I want to have a link inside my <Map>, somehow it breaks. This is the React structure of my page, <Popup> tag just contains null as Javascript is breaking:

这是一个相当复杂的问题，所以请随时问我问题。 谢谢。

我尝试了 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,
}