title: How to use Leaflet Routing Machine with React-Leaflet 3?
body: <p>The old way of doing things in react-leaflet 2.8.0 was to use <code>MapLayer</code> and <code>withLeaflet</code>.</p>
  <p>But now in react-leaflet:</p>
  <blockquote>
  <p><code>MapLayer</code> and <code>withLeaflet</code> are deprecated as of version 3.</p>
  </blockquote>
  <p>I'm trying to grasp the documentation for core: <a href="https://react-leaflet.js.org/docs/core-introduction" rel="nofollow noreferrer">https://react-leaflet.js.org/docs/core-introduction</a></p>
  <p>but the following doesn't work, I get</p>
  <blockquote>
  <p>The provided object is not a Layer.</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>import React, { Component, useEffect } from &quot;react&quot;;
  import { useLeafletContext, leafletElement, createLayerComponent } from '@react-leaflet/core'
  import { MapContainer, TileLayer, useMap } from &quot;react-leaflet&quot;;
  import Leaflet from &quot;leaflet&quot;;
  import &quot;leaflet-routing-machine&quot;;
  
  function Routing(props) {
      const context = useLeafletContext();
      useEffect(() =&gt; 
      {
        let routing = createLayerComponent(Leaflet.Routing.control(
        {
          waypoints: [
            Leaflet.latLng(33.52001088075479, 36.26829385757446),
            Leaflet.latLng(33.50546582848033, 36.29547681726967)
          ],
          lineOptions: {
            styles: [{ color: &quot;#6FA1EC&quot;, weight: 4 }]
          },
          show: false,
          addWaypoints: false,
          routeWhileDragging: true,
          draggableWaypoints: true,
          fitSelectedRoutes: true,
          showAlternatives: false
        }), )
        const container = context.layerContainer || context.map
        container.addLayer(routing)
  
        return () =&gt; {
          container.removeLayer(routing)
        }
      })
    return null;
  }
  
  
  function MapComponent() {
  
    return (
        &lt;MapContainer center={[33.5024, 36.2988]} zoom={14} &gt;
          &lt;TileLayer url=&quot;https://api.maptiler.com/maps/ch-swisstopo-lbm-dark/256/{z}/{x}/{y}.png?key=gR2UbhjBpXWL68Dc4a3f&quot; /&gt;
          &lt;Routing /&gt;
        &lt;/MapContainer&gt;
      );
    }
  
  
  export default MapComponent;
  </code></pre>