Changement de la propriété du composant React en fonction de l'itinéraire

Question

Je travaille sur mon tout premier projet React et je suis un peu bloqué sur la façon de gérer cette situation.

Le composant Header prend en charge plusieurs thèmes différents, que je dois pouvoir changer en fonction de la page affichée. Voici mon composant racine:

export default class App extends React.Component { 
    render() { 
     return (
      <Router> 
       <div> 
        <Header theme='light' /> 
        <Switch> 
         <Route exact path='/' /> 
         <Route exact path='/about' component={About} /> 
         <Route exact path='/clients' component={Clients} /> 
         <Route exact path='/services' component={Services} /> 
        </Switch> 
       </div> 
      </Router> 
     ); 
    } 
} 

Le composant Header peut recevoir une propriété theme (un des light, dark et solid). Je veux changer cette propriété de l'intérieur des composants rendus par les routes. Mon idée actuelle est d'ajouter une méthode setHeaderTheme au composant App et de passer cette fonction aux composants, mais je ne peux pas déterminer a) comment transmettre des propriétés supplémentaires aux composants via des routes et b) si cela est encore le meilleur plan d'action.

Answer 1

Essayez de passer des accessoires pour rendre la méthode de la route à vos clients composant, comme ci-dessous:

Ensuite, les clients à l'intérieur vous pouvez exécuter la fonction de parent par:

this.props.setHeaderTheme(); 

Answer 2

Pour passer plus paramètres aux composants via route par le code suivant

<Route path="/abc" render={()=><TestWidget num="2" someProp={100}/>}/> 

or 

<Route exact path="/abc" render={props => <TestWidget someProp="2" {...props} />} /> 

Puis sur TestWidget yo u peut accéder aux paramètres d'URL avec juste this.props.urlVariableHere

Veuillez consulter le

Pass props to components

React url parameters