Respostas:
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 MoviesIndex
componente tem acesso para this.props.history
redirecionar 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 withRouter
função, quando é exportado:
export default withRouter(Header)
Isso dá Header
acesso ao componente this.props.history
, o que significa que o cabeçalho agora pode redirecionar o usuário.
history
ou match
não está presente por padrão? ou seja, por que withRouter
deve ser mencionado explicitamente?
withRouter
é um componente de ordem superior que passará a rota mais próxima match
, atual location
e history
props 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 location
prop e obter mais informações location.pathname
ou 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 .
withRouter
o componente de ordem superior permite que você obtenha acesso às history
propriedades do objeto e à correspondência mais próxima <Route>
. withRouter
irá passar adereços atualizados match
, location
e history
para 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.
withRouter
também dá acesso amatch
elocation
. Seria bom se a resposta aceita mencionasse isso, já que redirecionar o usuário não é o único caso de uso parawithRouter
. Caso contrário, este é um bom self-qna.