Estou tentando carregar uma exibição de detalhes com base em uma rota react-router-dom que deve pegar o parâmetro URL (id) e usá-lo para preencher ainda mais o componente.
Minha rota parece /task/:id
e meu componente carrega bem, até eu tentar pegar o: id da URL da seguinte forma:
import React from "react";
import { useParams } from "react-router-dom";
class TaskDetail extends React.Component {
componentDidMount() {
let { id } = useParams();
this.fetchData(id);
}
fetchData = id => {
// ...
};
render() {
return <div>Yo</div>;
}
}
export default TaskDetail;
Isso dispara o seguinte erro e não tenho certeza onde implementar corretamente useParams ().
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Os documentos mostram apenas exemplos baseados em componentes funcionais, não baseados em classe.
Obrigado pela sua ajuda, sou novo em reagir.
useParams
? Talvez transformá-lo em um HOC
?