Wie übergebe ich Requisiten in der „Link“-Komponente von React-Router?

Props im „Link“ von React-Router übergeben

Wenn Sie React mit React-Router verwenden, können Sie Eigenschaften mithilfe von an eine neue Ansicht übergeben eine geänderte Syntax im Komponente.

Aktualisierte Syntax in React-Router v4 und v5

Um Requisiten in React-Router v4 und v5 zu übergeben, verwenden Sie die folgende Syntax:

<Link to={{ pathname: path, query: queryObject, search: searchString }}>
  ...
</Link>

wobei:

• Pfadname ist der Pfad zur neuen Ansicht.
• Abfrage ist ein Objekt, das Abfrageparameter enthält.
• Suche ist eine Zeichenfolge, die das darstellt Abfragezeichenfolge, z. B. ?foo=bar.

Zugriff auf Requisiten in der Zielkomponente

In der Zielkomponente können Sie auf die über übergebenen Requisiten zugreifen Verknüpfen Sie mithilfe der folgenden Techniken:

Veraltete Verwendung der Komponente „withRouter“ höherer Ordnung:

• Umschließen Sie die Zielkomponente mit withRouter, die den Zugriff auf die Komponente ermöglicht Match- und Location-Requisiten:

const NewView = withRouter(OriginalView);

Aktuelle Implementierung mit Hooks:

• Verwenden Sie die useParams- und useLocation-Hooks innerhalb der Funktionskomponente, um auf die zuzugreifen Übereinstimmungs- und Standort-Requisiten:

const NewView = () => {
  const { testvalue } = useParams();
  const { query, search } = useLocation();

  return (
    <div>
      {testvalue} {query.backUrl}
    </div>
  );
};

Beispiel

Betrachten Sie das folgende Beispiel:

App.js:

<Link to={{ pathname: '/ideas/:testvalue', query: { testvalue: 'hello' } }}>Create Idea</Link>

CreateIdeaView.js:

const CreateIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // prints 'hello'

  return (
    <div>{testvalue}</div>
  );
};

In diesem Beispiel wird durch Klicken auf den Link „Idee erstellen“ die Eigenschaft testvalue mit dem Wert hello an die CreateIdeaView-Komponente übergeben.

Hinweis:

• Der Pfad in der Link-Komponente sollte den Parameterplatzhalter enthalten, z. B. Pfad: '/ideas/:testvalue'.
• Der useParams-Hook gibt ein Objekt mit allen im Pfad definierten Parametern zurück.
• Der useLocation-Hook gibt ein Objekt mit Informationen über den aktuellen Standort zurück, einschließlich Abfrage und Suche.
• Die Abfrage ist ein Objekt, das Schlüssel-Wert-Paare enthält, während die Suchzeichenfolge die gesamte Abfragezeichenfolge enthält.

Das obige ist der detaillierte Inhalt vonWie übergebe ich Requisiten in der „Link“-Komponente von React-Router?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!