重现的步骤

我创建了一张传单地图。我在其中添加了一些标记。这些标记有弹出窗口。在每个弹出窗口中，我想要<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')
)

预期行为

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

实际行为

无法看到链接。它没有生成。

额外细节

在我的<MapMode>内，我从传单中使用<Map>。如果我在<Link>标记的正上方设置<Map>，则可以使用<Map>。一旦我想在<Popup>内部建立链接，它就会以某种方式中断。这是我的网页的React结构，null标记只包含{{1}}，因为Javascript正在破坏：

这是一个非常复杂的问题，所以请随时向我提问。感谢。

Answer 1

我尝试了Tharaka建议的解决方案，但它对我没用。看起来反应传单的Popup正在使用它自己的上下文，从而阻止从更高级别传递的上下文。然而，在这个解决方案的启发下，我提出了另一个，非常简单＆amp;基于组成原则。

我创建了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

然后以下列方式在我的组件（渲染Map，Marker，Popup＆amp; Link）中使用它：

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,
}

Answer 2

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

我在react-leaflet GitHub回购中获得了this issue的第一个提示。根据那个和你的错误，似乎问题是Popup无法从router访问context，因为context没有按照它们呈现方式传递给Popup。因此，如果我们可以将上下文显式传递给Popup，我们应该能够解决问题。

然后我找到了一种方法，可以将上下文显式传递给this 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。然后你可以使用像这样的HoC将router的上下文注入到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
    );
  }

}

Answer 3

我的解决方案（这是一种解决方法，但效果很好，我认为没有缺点）：

我通过使用（在反应路由器 v3 与 redux ）解决了

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

而goTo在

中定义

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

React Router Link不适用于LeafletJS

重现的步骤

预期行为

实际行为

额外细节

3 个答案: