在 layer.click() 内调用 useNavigate('url') 无效

Question

在这个项目中，我使用 React 传单来显示由 GEOJSON 要素对象生成的地图。我只是在点击每个国家层时转到动态国家路线。

const geoJsonRef = useRef();
useEffect(()=>{
    geoJsonRef.current.getLayers().map((layer)=>{
        layer.on({
            click : ()=>{
                useNavigate( 'go/to/country' ); // here is the error occurs
            }
        });
    });
}, [state]);
return(
    <MapContainer style={containerStyle} center={[10, 0]} zoom={2} minZoom={2.4} maxZoom={10}>
        <GeoJSON style={contryStyle} data={features} onEachFeature={onEachCountry} ref={geoJsonRef} />
    </MapContainer>
);

错误：

React Hook "useNavigate" is called in function "click" that is neither a React
function component nor a custom React Hook function. React component names
must start with an uppercase letter. React Hook names must start with the word "use" 
react-hooks/rules-of-hooks

从这个错误中我了解到，useNavigate() 的使用方式不正确。在 onEachCountry 函数中附加点击处理程序时得到的结果相同。我只需要知道点击处理程序提供路线的正确方式。

谢谢！

Answer 1

React hooks 只能从 React 函数组件或自定义 hooks 中调用，它们不能在回调、条件和循环中调用因为这打破了 Rules of Hooks.

先在组件体中调用useNavigate hook到return的navigate函数，然后调用navigate中的任何 callback/hook/etc...

const navigate = useNavigate();

useEffect(() => {
  geoJsonRef
    .current
    .getLayers()
    .map((layer) => {
      layer.on({
        click: () => {
          navigate('go/to/country');
        }
      });
  });
}, [state]);

在 layer.click() 内调用 useNavigate('url') 无效

Calling useNavigate('url') inside layer.click() is not working

geojson

reactjs

react-router

react-leaflet

react-hooks