Для чего нужен withRouter в react-router-dom?

Я иногда видел, как люди оборачивают свои компоненты, withRouterкогда экспортируют их:

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

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

export default withRouter(Foo);

Для чего это нужно и когда мне следует его использовать?

Когда вы включаете компонент главной страницы в свое приложение, он часто упаковывается в такой <Route>компонент:

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

Таким образом, MoviesIndexкомпонент получает доступ this.props.historyи может перенаправить пользователя с помощью this.props.history.push.

Некоторые компоненты (обычно компонент заголовка) появляются на каждой странице, поэтому не заключены в <Route>:

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

Это означает, что заголовок не может перенаправить пользователя.

Чтобы обойти эту проблему, компонент заголовка может быть заключен в withRouterфункцию при его экспорте:

export default withRouter(Header)

Это дает Headerкомпоненту доступ к this.props.history, а это значит, что заголовок теперь может перенаправлять пользователя.

withRouter- это компонент более высокого порядка, который будет передавать ближайшие route match, current locationи historyprops обернутому компоненту при каждом рендеринге. просто подключает компонент к роутеру.

Не все компоненты, особенно общие компоненты, будут иметь доступ к таким свойствам маршрутизатора. Внутри его обернутых компонентов вы сможете получить доступ к locationопоре и получить дополнительную информацию, например, location.pathnameперенаправить пользователя на другой URL-адрес this.props.history.push.

Вот полный пример со страницы 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);

Более подробную информацию можно найти здесь .

withRouterКомпонент более высокого порядка позволяет получить доступ к historyсвойствам объекта и ближайшему <Route>соответствию. withRouterбудет передавать обновленные match, locationи historyсвойства обернутому компоненту при каждом рендеринге.

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 - это компонент более высокого порядка, который будет передавать ближайший маршрут, чтобы получить доступ к некоторому свойству в отношении местоположения и совпадения с реквизитами, к нему можно получить доступ, только если дать компоненту свойство, расположенное в компоненте

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

и то же самое соответствие и процветание местоположения, чтобы иметь возможность изменить местоположение и использовать this.props.history.push, он должен быть предоставлен для каждого свойства компонента, которое должно обеспечивать, но при использовании WithRouter он может иметь доступ к местоположению и совпадению без добавления истории свойств. можно получить доступ к направлению без добавления истории свойств для каждого маршрута.