Ich versuche, eine Detailansicht basierend auf einer React-Router-Dom-Route zu laden, die den URL-Parameter (ID) abrufen und damit die Komponente weiter füllen soll.
Meine Route sieht so aus /task/:id
und meine Komponente wird einwandfrei geladen, bis ich versuche, die: id von der URL wie folgt abzurufen:
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;
Dies löst den folgenden Fehler aus und ich bin mir nicht sicher, wo useParams () korrekt implementiert werden soll.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Die Dokumente zeigen nur Beispiele, die auf Funktionskomponenten basieren, nicht auf Klassen.
Vielen Dank für Ihre Hilfe, ich bin neu zu reagieren.
reactjs
react-router
Jorre
quelle
quelle
useParams
? Vielleicht verwandeln Sie es in einHOC
?Antworten:
Sie können dies verwenden
withRouter
, um dies zu erreichen. Wickeln Sie einfach Ihre exportierte klassifizierte Komponente in einwithRouter
und dann können Siethis.props.match.params.id
die Parameter abrufen, anstatt sie zu verwendenuseParams()
. Sie können erhalten auch allelocation
,match
oderhistory
Informationen durch die VerwendungwithRouter
. Sie sind alle unter übergebenthis.props
Anhand Ihres Beispiels würde es so aussehen:
So einfach ist das!
quelle
Parameter werden durch Requisiten auf dem Match-Objekt weitergegeben.
Quelle: https://redux.js.org/advanced/usage-with-react-router
Hier ist ein Beispiel aus den Dokumenten, die die Requisiten in den Argumenten zerstören.
quelle
Da Hooks mit klassenbasierten Komponenten nicht funktionieren, können Sie sie in eine Funktion einschließen und die Eigenschaften weitergeben:
Aber, wie @ michael-mayo sagte, ich gehe davon aus, dass dies
withRouter
bereits der Fall ist.quelle
Sie können keinen Hook wie "useParams ()" aus einer React.Component aufrufen.
Der einfachste Weg, wenn Sie Hooks verwenden möchten und eine vorhandene react.component haben, besteht darin, eine Funktion zu erstellen. Rufen Sie dann die React.Component von dieser Funktion aus auf und übergeben Sie den Parameter.
Ihre Switch-Route wird immer noch so etwas wie sein
Dann können Sie die ID von den Requisiten in Ihrer Reaktionskomponente abrufen
quelle
Versuchen Sie so etwas
quelle
Mit React Router 5.1 können Sie die ID wie folgt erhalten:
und Ihre Komponente als auf ID zugreifen kann:
quelle