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

113

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

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

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

export default withRouter(Foo);

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

reactjs react-router Лондон Роб
источник

Ответы:

198

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

Лондон Роб
источник
30
Как указано в ответе @msoliman , withRouterтакже дает доступ к matchи location. Было бы неплохо, если бы в принятом ответе упоминалось это, поскольку перенаправление пользователя - не единственный вариант использования withRouter. В остальном это хорошая самооценка.
Michael Yaworski
Кроме того, если вам нужны <Link> и <NavLink> от маршрутизатора, необходимо использовать withRouter HOC.
thewebjackal
Думаю, ответ был бы более полным, если бы упоминалось, почему historyили matchнет по умолчанию? т.е. почему withRouterследует упомянуть явно?
Эмран Бэтмен Гелич
Что, если мы обернем компонент приложения BrowserRouter в index.js, тогда нам вообще не потребуется withRouter, пожалуйста, предложите?
Капил Ядав
46

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

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

Мухаммад Солиман
источник
9

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);
Гидеон Китили
источник
Подробнее об этом читайте
Гидеон Китили
0

withRouter - это компонент более высокого порядка, который будет передавать ближайший маршрут, чтобы получить доступ к некоторому свойству в отношении местоположения и совпадения с реквизитами, к нему можно получить доступ, только если дать компоненту свойство, расположенное в компоненте 

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

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

Mohammed_Alreai
источник