Comment transmettre des accessoires personnalisés aux composants enfants dans React Router v4 ?

Comment transmettre des accessoires personnalisés aux composants enfants dans React Router v4

Problème :

Dans React Router v4, tenter pour accéder aux accessoires de route via this.props.route renvoie undefined. Les composants enfants ne peuvent pas recevoir les accessoires personnalisés transmis par les composants parents.

Exemple de code :

<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>

Solution :

Pour transmettre des accessoires personnalisés aux composants enfants, utilisez un accessoire de rendu pour définir le composant en ligne avec l'itinéraire :

<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>

Dans le composant enfant, accédez à l'accessoire personnalisé comme suit :

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

Remarque : Assurez-vous que {...props} est transmis au composant enfant pour préserver l'accès aux accessoires de routeur par défaut (par exemple, correspondance, emplacement, historique).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!