React Router Link не работает с LeafletJS

Я не уверен на 100% в этом ответе. Но в любом случае я попытаюсь, потому что я думаю, что, по крайней мере, это может пролить свет на любого, кто попытается решить эту проблему в будущем.

Я получил первую подсказку от этой проблемы в react-leaflet репозитории GitHub. В соответствии с этим и вашей ошибкой кажется, что проблема в том, что всплывающее окно не может получить доступ к router из context, потому что context не передается во всплывающее окно так, как они его отображают. Таким образом, мы сможем решить проблему, если сможем явно передать контекст в 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;
}

Допустим, вы используете Popup внутри компонента MapMaker. Затем вы можете внедрить контекст с router в Popup, используя HoC следующим образом.

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

}

Я попробовал решение, предложенное Таракой, но оно мне не помогло. Похоже, всплывающее окно реагирующей листовки использует свой собственный контекст, тем самым блокируя контекст, который передается с более высоких уровней. Однако, вдохновленный этим решением, я придумал другое, очень простое и основанное на принципе композиции.

Я создал компонент 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,
}

Мое решение (это обходной путь, но он отлично работает, и я не вижу недостатков):

Я решил использовать (в реагирующем маршрутизаторе v3 с redux)

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

тогда как goTo определено в

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