Wie kann ich in React Router v4 benutzerdefinierte Requisiten an untergeordnete Komponenten übergeben?

Erweitern von Router-Komponenten mit benutzerdefinierten Requisiten in React Router v4

Beim Erstellen mehrseitiger React-Anwendungen mit React Router ist es oft wünschenswert, benutzerdefinierte Requisiten an untergeordnete Komponenten zu übergeben. Standardmäßig erben untergeordnete Komponenten das Objekt this.props.route, dieses enthält jedoch möglicherweise nicht immer die beabsichtigten Requisiten.

Problem: this.props.route für untergeordnete Komponenten nicht definiert

Das Problem kann sein beim Zugriff auf this.props.route in untergeordneten Komponenten beobachtet werden, was undefiniert zurückgibt. Dies liegt daran, dass die Standard-Rendermethode von React Router die Übergabe benutzerdefinierter Requisiten nicht unterstützt.

Lösung: Verwendung der Render-Requisite

Um benutzerdefinierte Requisiten zu übergeben, nutzen Sie die Render-Requisite der Route-Komponente. Dazu gehört das Inlining der Komponentendefinition innerhalb der Render-Requisite:

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

Zugriff auf benutzerdefinierte Requisiten in untergeordneten Komponenten

Greifen Sie in der untergeordneten Komponente über this.props auf die benutzerdefinierten Requisiten zu:

<code class="javascript">console.log(this.props.test); // Outputs "hi"</code>

Standard-Router-Requisiten weitergeben

Bei Verwendung der Render-Requisite ist es wichtig, Standard-Router-Requisiten (Standort, Verlauf, Übereinstimmung usw.) an die untergeordnete Komponente weiterzugeben. Dies wird erreicht, indem {...props} in die Render-Requisite aufgenommen wird:

<code class="javascript"><Route path="/home" render={(props) => <Home test="hi" {...props} />} /></code>

Fazit

Durch die Verwendung der Render-Requisite können Sie benutzerdefinierte Requisiten einfach an Router-Komponenten in React Router übergeben v4. Denken Sie daran, Standard-Router-Requisiten zu verbreiten, um die Funktionalität der untergeordneten Komponenten sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie kann ich in React Router v4 benutzerdefinierte Requisiten an untergeordnete Komponenten übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!