web-dev-qa-db-fra.com

React-router: comment passer un objet "match" dans un composant déclaré en tant que classe ES6?

Je suis nouveau sur react-router (v4) et je suivais le tutoriel jusqu'à ce petit problème:

Ce code fonctionne assez bien

class App extends Component {
render() {
return (
    <Router>
       <div>
           <ul>
              <li><Link to="/link/value1" className="nav-link">Value1</Link></li>
              <li><Link to="/link/value2" className="nav-link">Value2</Link></li>
              <li><Link to="/link/value3" className="nav-link">Value3</Link></li>
         </ul>
         <hr/>
         <Route path="/link/:id" component={Generic}/>
       </div>
    </Router>
);
}
}

J'ai défini un itinéraire vers/link /: id avec 3 liens vers celui-ci. Ensuite, je déclare mon composant "générique" comme ceci (en fonction):

const Generic = ({ match }) => (
<div className="wrapper">
    <div className="section">
        <div className="container">
            <h3>Menu : {match.params.id}</h3>
        </div>
    </div>
</div>
)

Ce travail comme prévu, pas de problème. Mais maintenant, je voudrais déclarer mon composant avec la syntaxe de classe ES6 comme ceci:

class Generic extends React.Component {
constructor(props) {
    super(props);
}

render() {
    return (
        <div className="wrapper">
            <div className="section">
                <div className="container">
                    <h3>Menu : {this.props.params.id}</h3>
                </div>
            </div>
        </div>
    );
}
}

Et ici, j'ai une erreur: Impossible de lire la propriété 'id' d'undefined

Comment puis-je accéder aux propriétés "match.params.id" en utilisant l'approche de classe ES6?

Merci de votre aide.

es6-classreact-router-v4
20
Cabrinha

Utilisation {this.props.match.params.id}

30
Riccardo Caroli

Si vous devez passer quelques accessoires au composant, utilisez cette approche: (par exemple)

<Route
  path='/home'
  render={(props) => <Home {...props} user = {this.state.user} />}
/>

Dans le composant cible, vous pouvez maintenant accéder à la fois au paramètre prop et au paramètre router en utilisant this.props.user & this.props.match.params.id

4
Pransh Tiwari