web-dev-qa-db-fra.com

Qu'est-ce que withRouter pour in react-router-dom?

J'ai parfois v les gens encapsulent leurs composants dans withRouter lorsqu'ils les exportent:

import { withRouter } from 'react-router-dom';

class Foo extends React.Component {
  // ...
}

export default withRouter(Foo);

À quoi sert-il et quand devrais-je l'utiliser?

reactjsreact-router
27
LondonRob

Lorsque vous incluez un composant de page principale dans votre application, il est souvent encapsulé dans un composant <Route> comme ceci:

<Route path="/movies" component={MoviesIndex} />

En faisant cela, le composant MoviesIndex a accès à this.props.history afin de pouvoir rediriger l'utilisateur avec this.props.history.Push.

Certains composants (généralement un composant d'en-tête) apparaissent sur chaque page et ne sont donc pas entourés d'un <Route>:

render() {
  return (<Header />);
}

Cela signifie que l'en-tête ne peut pas rediriger l'utilisateur.

Pour contourner ce problème, le composant d'en-tête peut être encapsulé dans une fonction withRouter , soit lors de son exportation:

export default withRouter(Header)

Cela donne au composant Header l'accès à this.props.history, ce qui signifie que l'en-tête peut maintenant rediriger l'utilisateur.

67
LondonRob

withRouter est un composant d'ordre supérieur qui transmettra les accessoires match, location et history de la route la plus proche au composant encapsulé à chaque restitution. il suffit simplement de connecter le composant au routeur.

Tous les composants, en particulier les composants partagés, n'auront pas accès aux accessoires de ce routeur. Dans ses composants encapsulés, vous pourrez accéder à location prop et obtenir davantage d'informations telles que location.pathname ou rediriger l'utilisateur vers une autre URL à l'aide de this.props.history.Push.

Voici un exemple complet de leur page github:

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

Plus d'informations pourraient être trouvées ici .

9
Muhammad Soliman

withRouter est un composant d'ordre supérieur qui passera par l'itinéraire le plus proche pour avoir accès à une propriété en termes d'emplacement et de correspondance avec les accessoires, il ne peut être accédé que si le composant est doté de la propriété située dans le composant.

<Route to="/app" component={helo} history ={history} />

et même la prospérité de match et d'emplacement pour pouvoir changer d'emplacement et utilisé this.props.history.Push il devrait être fourni pour chaque propriété de composant doit fournir peut être consulté sans ajouter d’historique de propriétés pour chaque itinéraire.

0
Mohammed_Alreai