React-Leaflet

Question

我有一个带有自定义引脚的 react-leaflet 集成（通过 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 中包含标签显然是不可能的。

有解决办法吗？

Answer 1

在 index.js 上定义两条路线：

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

MapLeaflet 将是包含您的地图和 AnotherPage 的组件，例如单击标记后您将被重定向到的另一个组件。

然后在你的 MapLeaflet comp

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

使用 onClick 事件从 Marker

导航到另一个页面路由

我已经可选地包含了从 AnotherPage comp 导航回“/”路由的可能性。

另外我用了 L.icon 而不是 L.divIcon。希望你没问题。

Demo

React-Leaflet - 自定义 Pin，OnClick Link 到另一个页面

React-Leaflet - Custom Pin, OnClick Link to another page

javascript

leaflet

reactjs

react-router