O que é withRouter no react-router-dom?

Às vezes, tenho visto pessoas embrulhar seus componentes withRouterao exportá-los:

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

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

export default withRouter(Foo);

Para que serve isso e quando devo usá-lo?

Quando você inclui um componente da página principal em seu aplicativo, ele geralmente é envolvido em um <Route>componente como este:

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

Ao fazer isso, o MoviesIndexcomponente tem acesso para this.props.historyredirecionar o usuário com this.props.history.push.

Alguns componentes (geralmente um componente de cabeçalho) aparecem em todas as páginas, portanto, não são agrupados em <Route>:

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

Isso significa que o cabeçalho não pode redirecionar o usuário.

Para contornar esse problema, o componente do cabeçalho pode ser agrupado em uma withRouterfunção, quando é exportado:

export default withRouter(Header)

Isso dá Headeracesso ao componente this.props.history, o que significa que o cabeçalho agora pode redirecionar o usuário.

withRouteré um componente de ordem superior que passará a rota mais próxima match, atual locatione historyprops para o componente encapsulado sempre que ele renderizar. simplesmente conecta o componente ao roteador.

Nem todos os componentes, especialmente os componentes compartilhados, terão acesso aos props desse roteador. Dentro de seus componentes empacotados, você seria capaz de acessar locationprop e obter mais informações location.pathnameou redirecionar o usuário para uma url diferente usando this.props.history.push.

Aqui está um exemplo completo da página do 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);

Mais informações podem ser encontradas aqui .

withRoutero componente de ordem superior permite que você obtenha acesso às historypropriedades do objeto e à correspondência mais próxima <Route>. withRouterirá passar adereços atualizados match, locatione historypara o componente encapsulado sempre que ele renderizar.

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 é um componente de ordem superior que passará pela rota mais próxima para obter acesso a alguma propriedade quanto à localização e correspondência dos adereços ele só pode ser acessado se fornecer ao componente a propriedade localizada no componente

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

e mesmo a prosperidade de correspondência e localização para ser capaz de alterar a localização e usado this.props.history.push deve ser fornecido para cada propriedade do componente deve fornecer, mas quando usado WithRouter pode ser acesso à localização e correspondência sem adicionar histórico de propriedade pode ser acessado em direção sem adicionar histórico de propriedade para cada rota.