¿Para que sirve withRouter en react-router-dom?

A veces he visto a personas envolver sus componentes withRoutercuando los exportan:

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

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

export default withRouter(Foo);

¿Para qué es esto y cuándo debo usarlo?

Cuando incluye un componente de la página principal en su aplicación, a menudo se incluye en un <Route>componente como este:

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

Al hacer esto, el MoviesIndexcomponente tiene acceso para this.props.historyque pueda redirigir al usuario con this.props.history.push.

Algunos componentes (comúnmente un componente de encabezado) aparecen en cada página, por lo que no están incluidos en un <Route>:

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

Esto significa que el encabezado no puede redirigir al usuario.

Para solucionar este problema, el componente de encabezado se puede incluir en una withRouterfunción, ya sea cuando se exporta:

export default withRouter(Header)

Esto le da Headeracceso al componente this.props.history, lo que significa que el encabezado ahora puede redirigir al usuario.

withRouteres un componente de orden superior que pasará la ruta más cercana match, la actual locationy los historyaccesorios al componente envuelto siempre que se procese. simplemente conecta el componente al enrutador.

No todos los componentes, especialmente los componentes compartidos, tendrán acceso a los accesorios de dicho enrutador. Dentro de sus componentes envueltos, podrá acceder a locationprop y obtener más información como location.pathnameo redirigir al usuario a una URL diferente usando this.props.history.push.

Aquí hay un ejemplo completo de su página de 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);

Puede encontrar más información aquí .

withRouterEl componente de orden superior le permite acceder a las historypropiedades del objeto y la <Route>coincidencia más cercana . withRouterpasará los accesorios actualizados match, locationy historyal componente envuelto siempre que se procese.

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 es un componente de orden superior que pasará la ruta más cercana para obtener acceso a alguna propiedad en cuanto a la ubicación y la coincidencia de los accesorios, solo se puede acceder si se le da al componente la propiedad ubicada en el componente

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

y la misma prosperidad de coincidencia y ubicación para poder cambiar la ubicación y usar this.props.history.push debe proporcionarse para cada componente que debe proporcionar la propiedad, pero cuando se usa WithRouter puede ser acceso a la ubicación y coincidencia sin agregar el historial de propiedad. Se puede acceder a la dirección sin agregar historial de propiedades para cada ruta.