L.Routing.controlonreact-leafletv3withhooks

1. 首先，应该先安装插件react-leaflet和leaflet-routing-machine的依赖。

2. 在App.js中使用useEffect钩子，引入leaflet-routing-machine，并创建路由控制器。

   import L from 'leaflet';
   import 'leaflet-routing-machine';
   import {useMap} from 'react-leaflet';
   import {useEffect, useRef} from 'react';
   
   function Routing({ map, waypoints }) {
      const routingRef = useRef(null);
   
      useEffect(() => {
         if (!routingRef.current) {
            routingRef.current = L.Routing.control({
               waypoints,
               show: false,
               router: L.Routing.osrmv1({ serviceUrl: 'http://router.project-osrm.org/route/v1' }),
            }).addTo(map.current.leafletElement);
         }
      }, [waypoints, map]);
   
      return null;
    }
   
    function App() {
       const mapRef = useRef(null);
   
      return (
        <div className="App">
           <MapContainer center={[51.505, -0.09]} zoom={13} whenCreated={(map) => { mapRef.current = map; }}>
             <Routing map={mapRef} waypoints={[L.latLng(51.5, -0.07), L.latLng(51.51, -0.09)]} />
           </MapContainer>
        </div>
      );
    }
   
   

   在上面的示例中，我们使用了useRef，以便在不重复渲染时保留L.Routing控件的引用。

3. 在使用路由控制器对象时，可以通过操作路由控制器对象的show()和hide()方法来显示或隐藏路由。

function Routing({ map, waypoints, isVisible }) {
    const routingRef = useRef(null);

    useEffect(() => {
       if (!routingRef.current) {
          routingRef.current = L.Routing.control({
             waypoints,
             show: false,
             router: L.Routing.osrmv1({ serviceUrl: 'http://router.project-osrm.org/route/v1' }),
          }).addTo(map.current.leafletElement);
       }

       if (isVisible) {
          routingRef.current.show();
       } else {
          routingRef.current.hide();
       }
    }, [waypoints, map, isVisible]);

    return null;
  }

  function App() {
     const mapRef = useRef(null);
     const [isRoutingVisible, setIsRoutingVisible] = useState(false);

     return (
      <div className="App">
         <button onClick={() => setIsRoutingVisible(!isRoutingVisible)}>Toggle routing visibility</button>
         <