A cosa serve withRouter in react-router-dom?

A volte ho visto persone avvolgere i loro componenti withRouterquando li esportano:

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

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

export default withRouter(Foo);

A cosa serve e quando dovrei usarlo?

Quando includi un componente della pagina principale nella tua app, è spesso racchiuso in un <Route>componente come questo:

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

In questo modo, il MoviesIndexcomponente ha accesso a in this.props.historymodo da poter reindirizzare l'utente con this.props.history.push.

Alcuni componenti (comunemente un componente di intestazione) vengono visualizzati su ogni pagina, quindi non sono racchiusi in <Route>:

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

Ciò significa che l'intestazione non può reindirizzare l'utente.

Per aggirare questo problema, il componente header può essere racchiuso in una withRouterfunzione, sia quando viene esportato:

export default withRouter(Header)

Ciò fornisce l' Headeraccesso al componente this.props.history, il che significa che l'intestazione può ora reindirizzare l'utente.

withRouterè un componente di ordine superiore che passerà la route match, la corrente locatione gli historyoggetti di scena più vicini al componente avvolto ogni volta che viene eseguito il rendering. semplicemente collega il componente al router.

Non tutti i componenti, specialmente i componenti condivisi, avranno accesso agli oggetti di scena di tale router. All'interno dei suoi componenti avvolti, sarai in grado di accedere a locationprop e ottenere più informazioni come location.pathnameo reindirizzare l'utente a un URL diverso utilizzando this.props.history.push.

Ecco un esempio completo dalla loro pagina 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);

Maggiori informazioni possono essere trovate qui .

withRouterIl componente di ordine superiore ti consente di accedere alle historyproprietà dell'oggetto e alla corrispondenza più vicina <Route>. withRouterpasserà gli oggetti di scena aggiornati match, locatione historyal componente avvolto ogni volta che viene eseguito il rendering.

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 è un componente di ordine superiore che passerà il percorso più vicino per ottenere l'accesso ad alcune proprietà per quanto riguarda la posizione e la corrispondenza dagli oggetti di scena è possibile accedervi solo se dai al componente la proprietà situata nel componente

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

e lo stesso la corrispondenza e la prosperità della posizione per poter cambiare la posizione e utilizzare this.props.history.push dovrebbe essere fornito per ogni proprietà del componente deve fornire, ma quando viene utilizzato WithRouter può essere accesso alla posizione e abbinare senza aggiungere la cronologia della proprietà. è possibile accedere alla direzione senza aggiungere la cronologia delle proprietà per ogni percorso.