Es tritt ein TypeError auf: Eigenschaften von undefiniert können nicht gelesen werden (Lesen von „Push“) ) beim Versuch, mit dem useNavigate-Hook in einer Klassenkomponente zu navigieren.
In React Router v6 ist useNavigate nur mit Funktionskomponenten kompatibel. Beim Versuch, es in einer Klassenkomponente (AddContacts) zu verwenden, bleibt es undefiniert, was zu dem Fehler führt.
Um dieses Problem zu beheben, gibt es zwei Möglichkeiten:
Refaktorieren Sie die AddContacts-Klassenkomponente in eine Funktionskomponente. Dadurch können Sie den useNavigate-Hook direkt innerhalb der Funktion verwenden.
Erstellen Sie ein benutzerdefiniertes withRouter HOC, um die Routen-Requisiten, einschließlich useNavigate, in die AddContacts-Komponente einzufügen.
Hier ist ein Beispiel für ein benutzerdefiniertes withRouter HOC:
const withRouter = (WrappedComponent) => (props) => { const navigate = useNavigate(); return ( <WrappedComponent {...props} navigate={navigate} /> ); };
Dann dekorieren Sie die AddContacts-Komponente mit dem HOC:
export default withRouter(AddContacts);
Dadurch wird die Navigationsstütze an die AddContacts-Komponente übergeben und Sie können sie wie erwartet verwenden.
In React Router v6 hat sich die Navigations-API geändert. Das History-Objekt wird nicht mehr direkt verwendet. Stattdessen gibt es eine Navigationsfunktion, die ein oder zwei Argumente akzeptiert: einen Zielpfad und ein optionales „Options“-Objekt für „Ersetzen“ oder „Status“.
Um programmgesteuert zu navigieren, verwenden Sie die folgende Syntax:
this.props.navigate('/');
Das obige ist der detaillierte Inhalt vonWie kann ich in React Router v6 mit Klassenkomponenten programmgesteuert umleiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!