React-Leaflet - Custom Pin, OnClick Ссылка на другую страницу - PullRequest
Новая
       18

React-Leaflet - Custom Pin, OnClick Ссылка на другую страницу

0 голосов
/ 16 апреля 2019

У меня есть интегрированная листовка с пользовательскими контактами (через divIcon) 

const divIcon = L.divIcon({
      className: '',
      html: ReactDOMServer.renderToString(
          <CustomPin pinColour={pinColour} pinCode={pinCode} pinID={id} history={history} />
      ),
      iconSize: [24, 40],
      iconAnchor: [12, 40],
      popupAnchor: [0, -40]
});

Если я хочу сделать перенаправление, когда пользователь нажимает пользовательский значок, как я могу это сделать?

Включение тега в ReactDOMServer.renderToString, очевидно, невозможно.

Есть ли обходной путь для этого?

1 Ответ

2 голосов
/ 17 апреля 2019

Определите два маршрута в index.js: 

const App = () => {
  return (
    <Router>
      <Route exact path="/" component={MapLeaflet} />
      <Route path="/another-page" component={AnotherPage} />
    </Router>
  );
};

MapLeaflet будет компонентом, который будет содержать вашу карту, и AnotherPage, например, другой компонент, на который вы будете перенаправлены после нажатия на маркер.

Затем в вашем компиляторе MapLeaflet 

<Marker
    position={position}
    icon={customMarker}
    onClick={() => this.props.history.push("/another-page")}>

используйте событие onClick для перехода к маршруту на другую страницу из Marker

. Я включил опционально возможностьвернуться к маршруту '/' из компилятора AnotherPage.

Также я использовал L.icon вместо L.divIcon.Надеюсь, это нормально для вас.

Демо

...