¿Cómo puedo solucionar este error en React relacionado con react-router?

Por favor, dime que no puedo resolverlo durante 4 días, no importa cuánto lo intente, aparece el mismo error, no importa qué biblioteca añada a mi aplicación, entienden el react-router, y cada compilación termina con Error: Llamado de hook no válido. Los Hooks sólo pueden ser llamados dentro del cuerpo de un componente de función. Podría suceder por una de las siguientes razones:
1. Podría tener versiones incompatibles de React y el renderer (como React DOM)
2. Podría estar infringiendo las Reglas de Hooks
3. Podría tener más de una copia de React en la misma aplicación
Ver https://reactjs.org/link/invalid-hook-call para obtener consejos sobre cómo depurar y solucionar este problema.

Con este error, ¿podrías decirme cómo solucionarlo correctamente y puede estar de alguna manera relacionado con la instalación de la biblioteca, o simplemente no es compatible con mi react-router, estaría agradecido por tu ayuda!

import { BrowserRouter as Router, Routes, Route, Link } from “react-router-dom”;

export default function App() {
return (

} />
} />
} />

);
}

const Main = () => {

¡Soy la página principal! ¡Hola usuario!

}
const Users = () => {

¡Soy la página de Usuarios! ¡Hola usuario!

}
const Contacts = () => {

¡Soy la página de Contactos! ¡Hola usuario!

}

davy.ai

June 11, 2023 at 5:42 pm

El mensaje de error “Llamada inválida al gancho. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función” generalmente significa que los ganchos como useState o useEffect se están usando incorrectamente dentro de un componente funcional.

El fragmento de código proporcionado parece tener la sintaxis correcta. Sin embargo, las funciones de componente Main, Users y Contacts no devuelven los elementos JSX. Deberían actualizarse para devolver el código JSX dentro de paréntesis o llaves.

Además, hay un problema con la configuración de las Rutas. Los tres componentes de Ruta están utilizando exactamente la misma ruta, lo que está causando un conflicto. Cada uno de ellos debe tener una ruta única asignada.

Es posible que desee verificar la compatibilidad de versiones entre React y react-router-dom. Asegúrese de tener solo una copia de React instalada en su aplicación.

Aquí está el código actualizado con las correcciones mencionadas:

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <header>
        <router>
          <routes>
            <route exact="" path="/" element=""></route><main></main>} />
            <route exact="" path="/users" element=""></route><users></users>} />
            <route exact="" path="/contacts" element=""></route><contacts></contacts>} />
          </routes>
        </router>
      </header>
    </div>
  );
}

const Main = () => (
  <div>
    <h1>¡Soy la página principal! ¡Hola usuario!</h1>
  </div>
);
const Users = () => (
  <div>
    <h1>¡Soy la página de usuarios! ¡Hola usuario!</h1>
  </div>
);
const Contacts = () => (
  <div>
    <h1>¡Soy la página de contactos! ¡Hola usuario!</h1>
  </div>
);

Answer

davy.ai

June 11, 2023 at 5:42 pm
El mensaje de error “Llamada inválida al gancho. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función” generalmente significa que los ganchos como useState o useEffect se están usando incorrectamente dentro de un componente funcional.

El fragmento de código proporcionado parece tener la sintaxis correcta. Sin embargo, las funciones de componente Main, Users y Contacts no devuelven los elementos JSX. Deberían actualizarse para devolver el código JSX dentro de paréntesis o llaves.

Además, hay un problema con la configuración de las Rutas. Los tres componentes de Ruta están utilizando exactamente la misma ruta, lo que está causando un conflicto. Cada uno de ellos debe tener una ruta única asignada.

Es posible que desee verificar la compatibilidad de versiones entre React y react-router-dom. Asegúrese de tener solo una copia de React instalada en su aplicación.

Aquí está el código actualizado con las correcciones mencionadas:
```
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <header>
        <router>
          <routes>
            <route exact="" path="/" element=""></route><main></main>} />
            <route exact="" path="/users" element=""></route><users></users>} />
            <route exact="" path="/contacts" element=""></route><contacts></contacts>} />
          </routes>
        </router>
      </header>
    </div>
  );
}

const Main = () => (
  <div>
    <h1>¡Soy la página principal! ¡Hola usuario!</h1>
  </div>
);
const Users = () => (
  <div>
    <h1>¡Soy la página de usuarios! ¡Hola usuario!</h1>
  </div>
);
const Contacts = () => (
  <div>
    <h1>¡Soy la página de contactos! ¡Hola usuario!</h1>
  </div>
); 
```

Comments are closed.

es.davy.ai

¿Tienes una pregunta?