L.Routing.control на реактивной листовке v3 с хуками

Вы можете создать свой собственный компонент для настройки маршрутизации между двумя точками, используя leaflet-routing-machine:

Установите библиотеку:

npm i leaflet-routing-machine

Импортировать файл css библиотеки:

import "leaflet-routing-machine/dist/leaflet-routing-machine.css";

Импортируйте js-файл библиотеки:

import "leaflet-routing-machine";

Создайте пользовательскую композицию:

function Routing() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    const routingControl = L.Routing.control({
      waypoints: [L.latLng(57.74, 11.94), L.latLng(57.6792, 11.949)],
      routeWhileDragging: true
    }).addTo(map);

    return () => map.removeControl(routingControl);
  }, [map]);

  return null;
}

затем используйте его как обычный компонент реагирующей листовки:

<MapContainer ...>
  ...
  <Routing/>
</MapContainer>

Демо