How to build a route on yandex maps in react via react-yandex-maps

Question

i'm trying to build a route in yandex maps, if use vanilla JS there are no problems but in react-app it doesn't work. I tryed to do it like in these examples:

https://codesandbox.io/s/p37m4lz4j7

https://github.com/gribnoysup/react-yandex-maps/issues/14

https://codesandbox.io/s/lrwyz2z4l9

but route does not displaying. However, code from these examples doesn't work too , the route doesn't appear. Maybe someone can explain how to build a route from point A to point B?

Answer 1

Finally, i found my mistake. If you use react-yandex-maps don't forget to set your yandex api key :

<YMaps query={{ apikey: 'YOUR API KEY' }}>

Answer 2

export default function App() {
  const map = useRef(null);
  const mapState = {
    center: [55.739625, 37.5412],
    zoom: 12
  };

  const addRoute = (ymaps) => {
    const pointA = [55.749, 37.524]; // Москва
    const pointB = [59.918072, 30.304908]; // Санкт-Петербург

    const multiRoute = new ymaps.multiRouter.MultiRoute(
      {
        referencePoints: [pointA, pointB],
        params: {
          routingMode: "pedestrian"
        }
      },
      {
        boundsAutoApply: true
      }
    );

    map.current.geoObjects.add(multiRoute);
  };

  return (
    <div className="App">
      <YMaps query={{ apikey }}>
        <Map
          modules={["multiRouter.MultiRoute"]}
          state={mapState}
          instanceRef={map}
          onLoad={addRoute}
        ></Map>
      </YMaps>
    </div>
  );
}

enter image description here