Tengo una aplicación de reacción normal, usando el enrutador de reacción. Cuando intento obtener los parámetros de URL en Box.js, aparece este error: Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro del cuerpo de un componente de función. Este es el código:
Caja.js
import React from 'react' import { useParams } from "react-router-dom"; function Box() { let params = useParams(); return ( <div> <h1>{params}</h1> </div> ) } export default Box();Aplicación.js
import { Routes, Route } from "react-router-dom"; import Box from './Box'; function App() { return ( <div className="App"> <Routes> <Route exact path="/palette/:id/:color" element={<Box />} /> </Routes> </div> ); } export default App;No debe llamar a una función mientras exporta.
import React from 'react' import { useParams } from "react-router-dom"; function Box() { let params = useParams(); return ( <div> <h1>{params}</h1> </div> ) } export default Box;Eliminar el () de la parte de exportación
import React from 'react' import { useParams } from "react-router-dom"; function Box(){ let params = useParams(); return ( <div> <h1>{params}</h1> </div> ) } export default Box;Si está utilizando el enlace npm o cualquier otra biblioteca, su paquete puede ver dos reacciones diferentes y mostrar ese error , consulte aquí
o puede eliminar el ()
import React from 'react' import { useParams } from "react-router-dom"; function Box() { let params = useParams(); return ( <div> <h1>{params}</h1> </div> ) } export default Box();