Wie kann ich in React Router v6 mit Klassenkomponenten programmgesteuert umleiten?

Problem bei der programmgesteuerten Umleitung zu einer Route in React Router v6

Problem

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.

Ursache

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.

Lösung

Um dieses Problem zu beheben, gibt es zwei Möglichkeiten:

1. Konvertieren Sie AddContacts in eine Funktionskomponente.

Refaktorieren Sie die AddContacts-Klassenkomponente in eine Funktionskomponente. Dadurch können Sie den useNavigate-Hook direkt innerhalb der Funktion verwenden.

2. Verwenden Sie ein benutzerdefiniertes withRouter HOC (Komponente höherer Ordnung).

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.

Hinweis zur Änderung der Navigations-API

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!