es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Llamar a useNavigate(‘url’) dentro de layer.click() no está funcionando.

17 Jul, 2023 Programación

En este proyecto, estoy utilizando react leaflet para mostrar un mapa que se genera mediante un objeto de características GEOJSON. Solo quiero ir a una ruta de país dinámica al hacer clic en cada capa del país.

const geoJsonRef = useRef();
useEffect(() => {
    geoJsonRef.current.getLayers().map((layer) => {
        layer.on({
            click: () => {
                useNavigate('ir/a/pais'); // aquí ocurre el error
            }
        });
    });
}, [state]);
return (
    <mapcontainer style="{containerStyle}" center="{[10," 0]}="" zoom="{2}" minzoom="{2.4}" maxzoom="{10}">
        <geojson style="{contryStyle}" data="{features}" oneachfeature="{onEachCountry}" ref="{geoJsonRef}"></geojson>
    </mapcontainer>
);

Error:

Se llama al React Hook "useNavigate" en la función "click" que no es ni un componente de función React ni una función de gancho personalizada de React. Los nombres de los componentes React deben comenzar con una letra mayúscula. Los nombres de los Hooks de React deben comenzar con la palabra "use"
react-hooks/rules-of-hooks

A partir de este error, puedo entender que no se está utilizando correctamente useNavigate(). Lo mismo sucede cuando se adjunta el controlador de clic en la función onEachCountry. Solo necesito saber la forma correcta de proporcionar la ruta en el controlador de clic.

¡Gracias!

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Dado que useNavigate() es un hook de React, solo debe usarse dentro de un componente de función de React, no dentro de una función regular como el controlador de click. Para manejar el evento de clic y navegar a la ruta del país dinámico, puedes definir una variable de estado para realizar un seguimiento del país seleccionado y luego utilizar el hook useEffect() para navegar a la ruta correspondiente cuando la variable de estado cambie. Aquí tienes un ejemplo:

    const [selectedCountry, setSelectedCountry] = useState(null);

const handleCountryClick = (event) => {
  setSelectedCountry(event.target.feature.properties.id);
};

useEffect(() => {
  if (selectedCountry) {
    navigate(`/country/${selectedCountry}`);
  }
}, [selectedCountry]);

return (
  <mapcontainer style="{containerStyle}" center="{[10," 0]}="" zoom="{2}" minzoom="{2.4}" maxzoom="{10}">
    <geojson style="{countryStyle}" data="{features}" oneachfeature="{(feature," layer)=""> {
      layer.on({
        click: handleCountryClick
      });
    }} />
  </geojson></mapcontainer>
);

    En este ejemplo, la función handleCountryClick() establece la variable de estado selectedCountry como el ID del elemento en el que se hizo clic. Luego, el hook useEffect() observa los cambios en selectedCountry y navega a la ruta correspondiente utilizando la función navigate() de react-router-dom. Ten en cuenta que se asume que la ruta tiene el formato /country/:id, donde :id es el ID del país seleccionado. Es posible que debas ajustarlo para que coincida con tu esquema de enrutamiento específico.

Comments are closed.