web-dev-qa-db-fra.com

Reactjs - `component` vs` render` dans Route

J'ai deux doutes concernant l'utilisation de Route de react-router-dom (v4.3.1):

  1. Quand utilisons-nous component vs render dans Route:

    <Route exact path='/u/:username/' component={ProfileComponent} />
<Route exact path='/u/:username/' render={() => <ProfileComponent />} />
  2. Comment accéder à la variable username dans l'url dans les deux sens?
javascriptreactjsroutesreact-router-dom
7
Sreekar Mouli

Lorsque vous passez un composant à l'accessoire component, le composant obtient les paramètres de chemin dans le props.match.params objet, c'est-à-dire props.match.params.username dans votre exemple:

class ProfileComponent extends React.Component {
  render() {
    return <div>{this.props.match.params.username}</div>;
  }
}

Lors de l'utilisation de l'accessoire render, les paramètres de chemin sont accessibles via les accessoires fournis à la fonction render:

<Route
  exact
  path='/u/:username/'
  render={(props) => 
    <ProfileComponent username={props.match.params.username}/>
  }
/>

Vous utilisez généralement l'accessoire render lorsque vous avez besoin de certaines données du composant qui contient vos itinéraires, car l'accessoire component ne donne aucun moyen réel de transmettre des accessoires supplémentaires au composant.

4
Tholle