À quoi sert withRouter dans react-router-dom?

J'ai parfois vu des gens emballer leurs composants withRouterlorsqu'ils les exportaient:

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

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

export default withRouter(Foo);

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

Lorsque vous incluez un composant de page principale dans votre application, il est souvent enveloppé dans un <Route>composant comme celui-ci:

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

En faisant cela, le MoviesIndexcomposant a accès à this.props.historyafin qu'il puisse rediriger l'utilisateur avec this.props.history.push.

Certains composants (généralement un composant d'en-tête) apparaissent sur chaque page, ils ne sont donc pas encapsulés dans 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 withRouterfonction, soit lors de son exportation:

export default withRouter(Header)

Cela donne au Headercomposant l'accès à this.props.history, ce qui signifie que l'en-tête peut désormais rediriger l'utilisateur.

withRouterest un composant d'ordre supérieur qui transmettra la route match, le courant locationet les historyaccessoires les plus proches au composant encapsulé à chaque fois qu'il sera rendu. il connecte simplement le composant au routeur.

Tous les composants, en particulier les composants partagés, n'auront pas accès aux accessoires de ce routeur. À l'intérieur de ses composants enveloppés, vous pourrez accéder à locationprop et obtenir plus d'informations comme location.pathnameou rediriger l'utilisateur vers différentes URL en utilisant 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 peuvent être trouvées ici .

withRouterLe composant d'ordre supérieur vous permet d'accéder aux historypropriétés de l' objet et à la correspondance la plus proche <Route>. withRoutertransmettra les accessoires mis à jour match, locationet historyau composant encapsulé à chaque fois qu'il sera rendu.

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);

withRouter est un composant d'ordre supérieur qui passera l'itinéraire le plus proche pour accéder à une propriété quant à l'emplacement et à la correspondance à partir des accessoires auxquels il ne peut être accédé que si donnez au composant la propriété située dans le composant

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

et même la prospérité de correspondance et d'emplacement pour pouvoir changer l'emplacement et utiliser this.props.history.push il doit être fourni pour chaque composant que la propriété doit fournir, mais lorsqu'il est utilisé WithRouter, il peut accéder à l'emplacement et correspondre sans ajouter d'historique de propriété. peut être accédé direction sans ajouter l'historique de propriété pour chaque itinéraire.