Do czego służy withRouter w React-router-dom?

Mam czasami postrzegane ludzie owinąć ich komponentów w withRouterprzypadku ich wywozu są:

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

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

export default withRouter(Foo);

Do czego to służy i kiedy powinienem go używać?

Kiedy umieszczasz w aplikacji komponent strony głównej, często jest on opakowany w taki <Route>komponent:

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

W ten sposób MoviesIndexkomponent ma dostęp do, this.props.historyaby mógł przekierować użytkownika za pomocąthis.props.history.push .

Niektóre komponenty (zwykle komponent nagłówka) pojawiają się na każdej stronie, więc nie są opakowane w <Route>:

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

Oznacza to, że nagłówek nie może przekierować użytkownika.

Aby obejść ten problem, komponent nagłówka można opakować w withRouterfunkcję, gdy jest eksportowany:

export default withRouter(Header)

Daje to Headerdostęp do komponentu this.props.history, co oznacza, że ​​nagłówek może teraz przekierować użytkownika.

withRouterjest komponentem wyższego rzędu, który przekaże najbliższą trasę match, bieżącą locationi historywłaściwości do opakowanego komponentu podczas renderowania. po prostu łączy komponent z routerem.

Nie wszystkie komponenty, zwłaszcza komponenty współdzielone, będą miały dostęp do właściwości routera. Wewnątrz jego opakowanych komponentów byłbyś w stanie uzyskać dostęp do locationwłaściwości i uzyskać więcej informacji, takich jak location.pathnamelub przekierować użytkownika do innego adresu URL za pomocą this.props.history.push.

Oto pełny przykład z ich strony 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);

Więcej informacji można znaleźć tutaj .

withRouterkomponent wyższego rzędu pozwala uzyskać dostęp do historywłaściwości obiektu i najbliższego <Route>dopasowania. withRouterprzekaże zaktualizowane match, locationi historyprops do opakowanego komponentu za każdym razem, gdy będzie renderowany.

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 jest komponentem wyższego rzędu, który przejdzie najbliższą trasę, aby uzyskać dostęp do pewnej właściwości co do lokalizacji i dopasowania z właściwości, do których można uzyskać dostęp tylko wtedy, gdy nadasz komponentowi właściwość znajdującą się w komponencie

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

i to samo dopasowanie i dobrobyt lokalizacji, aby móc zmienić lokalizację i użyć this.props.history.push, należy to zapewnić dla każdej właściwości komponentu, którą musi zapewnić, ale gdy jest używany WithRouter może być dostęp do lokalizacji i dopasować bez dodawania historii właściwości. można uzyskać dostęp do kierunku bez dodawania historii właściwości dla każdej trasy.