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

So übergeben Sie benutzerdefinierte Requisiten an untergeordnete Komponenten in React Router v4

Problem:

In React Router v4 wird versucht um auf Routen-Requisiten über this.props.route zuzugreifen, wird undefiniert zurückgegeben. Untergeordnete Komponenten können keine benutzerdefinierten Requisiten empfangen, die von übergeordneten Komponenten übergeben werden.

Beispielcode:

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact test="hi" component={Home} />
          <Route path="/progress" test="hi" component={Progress} />
          <Route path="/test" test="hi" component={Test} />
        </Switch>
      </div>
    </Router>
  );
}

// Child Component
render() {
  console.log(this.props); // Returns {match: {...}, location: {...}, history: {...}, staticContext: undefined}
}</code>

Lösung:

Um benutzerdefinierte Requisiten an untergeordnete Komponenten zu übergeben, verwenden Sie eine Render-Requisite, um die Komponente inline mit der Route zu definieren:

<code class="javascript">// Parent Component
render() {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" exact render={(props) => <Home test="hi" {...props} />} />
          <Route path="/progress" render={(props) => <Progress test="hi" {...props} />} />
          <Route path="/test" render={(props) => <Test test="hi" {...props} />} />
        </Switch>
      </div>
    </Router>
  );
}</code>

Greifen Sie in der untergeordneten Komponente wie folgt auf die benutzerdefinierte Requisite zu:

<code class="javascript">render() {
  console.log(this.props.test); // Returns "hi"
}</code>

Hinweis: Stellen Sie sicher, dass {...props} an die untergeordnete Komponente übergeben wird, um den Zugriff auf Standard-Router-Requisiten (z. B. Übereinstimmung, Standort, Verlauf) beizubehalten.

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