À l'aide de Réagir Routeur withRouter

Comment obtenez-vous le contexte de routage, l'emplacement, les paramètres, etc, lors de l'utilisation de withRouter()?

import { withRouter } from 'react-router';

const SomeComponent = ({location, route, params}) => (
    <h1>The current location is {location.pathname}</h1>
);

const ComposedWithRouter = withRouter(SomeComponent);

Pouvez-vous obtenir de l'information à l'aide de withRouter ou faire ces choses doivent être explicitement transmis le composant de l'arbre?

OriginalL'auteur Tabbyofjudah | 2016-08-26

  1. 14

    Donc, pas à l'aide context plus. Tout est disponible dans les accessoires:

    SomeComponent.propTypes = {
  location: React.PropTypes.shape({
    pathname: React.PropTypes.string,
    query: React.PropTypes.shape({
      ...
    })
  }),
  params: React.PropTypes.shape({
    ...
  }),
  router: React.PropTypes.object
}

const ComposedWithRouter = withRouter(SomeComponent);

    Alors disons que dans SomeComponent vous vouliez envoyer l'utilisateur vers une autre route, il vous suffit de faire this.props.router.push('someRoute')

    Donc, la seule solution est de transmettre explicitement les accessoires de composants enfants? Et si vous vouliez faire et de distribuer un <Mie de pain /> composant?
    Eh bien, cela dépend de combien de liens avec le routeur vous le voulais. Si par exemple vous ne se souciait de le distribuer aux gens en utilisant des react-router, alors au lieu de les exporter BreadCrumbs, you would export withRouter(Chapelure) " et de cette façon, il serait toujours avoir accès au routeur/emplacement.

    OriginalL'auteur Matthew Herbst

  2. 1

    Arriver localisation, etc. via withRouter a été ajouté à réagir routeur à la version 2.7. Dan Abramov recommande la mise à niveau à la version 3.0 pour utiliser withRouter. Avant 2.7, il a seulement fourni un ensemble de fonctions.

    OriginalL'auteur stone