Блог

Главная - Вопросы по программированию - Реагировать-Листовка — пользовательский пин-код, щелкнуть ссылку на другую страницу

Реагировать-Листовка — пользовательский пин-код, щелкнуть ссылку на другую страницу

#javascript #reactjs #react-router #leaflet #react-leaflet

#javascript #reactjs #реагировать-маршрутизатор #листовка #реагировать-листовка

Вопрос:

У меня есть интеграция с реакцией-листовкой с пользовательскими выводами (через 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. @kboul Это правильно

3. Привет @LiamB. Вы проверили мой ответ. Это решило вашу проблему?

4. Да, отлично! Спасибо!

Ответ №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

Я дополнительно включил возможность перехода обратно к маршруту ‘/’ с другой страницы.

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

ДЕМОНСТРАЦИЯ

Метки: