O que é withRouter no react-router-dom?


109

À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?

Respostas:


182

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.


26
Conforme declarado na resposta de @msoliman , withRoutertambém dá acesso a matche location. Seria bom se a resposta aceita mencionasse isso, já que redirecionar o usuário não é o único caso de uso para withRouter. Caso contrário, este é um bom self-qna.
Michael Yaworski

Além disso, se você precisar do <Link> e do <NavLink> do roteador, é necessário usar o HOC withRouter.
thewebjackal

Acho que a resposta seria mais completa se mencionada por que historyou matchnão está presente por padrão? ou seja, por que withRouterdeve ser mencionado explicitamente?
Emran BatmanGhelich

43

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 .


8

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


0

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.