React钩子只能从React函数组件或自定义钩子调用，不能在回调、条件和循环中调用，因为这违反了钩子规则。
在这个项目中，我使用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函数中附加单击处理程序时也得到了同样的结果。我只需要知道点击处理程序给出路线的正确方式。
谢谢！
在组件主体中首先调用useNavigate钩子以返回navigate函数，然后在任何回调/钩子等中调用navigate。。。
const navigate = useNavigate();
useEffect(() => {
geoJsonRef
.current
.getLayers()
.map((layer) => {
layer.on({
click: () => {
navigate('go/to/country');
}
});
});
}, [state]);