A quoi sert withRouter dans react-router-dom ?

Question

J'ai parfois vu les gens enveloppent leurs composants dans withRouter lorsqu'ils les exportent :

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

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

export default withRouter(Foo);

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

Answer 1

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

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

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

Certains composants (généralement un composant d'en-tête) apparaissent sur toutes les pages, et ne sont donc pas enveloppés dans une balise <Route> :

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

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

Pour contourner ce problème, le composant de l'en-tête peut être enveloppé dans un fichier de type withRouter soit lorsqu'il est exporté :

export default withRouter(Header)

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

Answer 2

withRouter est un composant d'ordre supérieur qui passera l'étape la plus proche de l'itinéraire. match actuel location y history props au composant enveloppé à chaque fois qu'il est rendu. Il connecte simplement le composant au routeur.

Tous les composants, en particulier les composants partagés, n'auront pas accès aux props de ces routeurs. À l'intérieur de ses composants enveloppés, vous pourrez accéder aux éléments suivants location et obtenir plus d'informations comme location.pathname ou rediriger l'utilisateur vers une url différente en utilisant this.props.history.push .

Voici un exemple complet tiré 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);

De plus amples informations peuvent être trouvées aquí .

Answer 3

withRouter d'ordre supérieur permet d'accéder à la composante history et les propriétés les plus proches de l'objet <Route> Le match de l'équipe. withRouter passera les mises à jour match , location y history au composant enveloppé à chaque fois qu'il est 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);

Answer 4

WithRouter est un composant d'ordre supérieur qui passera les routes les plus proches pour accéder à une propriété en fonction de l'emplacement et de la correspondance des accessoires. On ne peut y accéder que si l'on donne au composant la propriété située dans le composant.

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

et même le match et la prospérité de l'emplacement pour être en mesure de changer l'emplacement et utilisé this.props.history.push il devrait être fourni pour chaque composant propriété doit fournir, mais quand il est utilisé WithRouter il peut être accès à l'emplacement et le match sans ajouter l'histoire de la propriété, il peut être accédé à la direction sans ajouter l'histoire de la propriété de chaque Route.