Для чого потрібен 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є компонентом вищого порядку, який буде передавати найближчий маршрут match, поточний locationта historyреквізит обгорнутому компоненту щоразу, коли він відображається. просто він підключає компонент до маршрутизатора.

Не всі компоненти, особливо спільні компоненти, матимуть доступ до реквізитів такого маршрутизатора. Усередині його загорнутих компонентів ви зможете отримати доступ до locationprop і отримати більше інформації, наприклад 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і historyprops обгорнутому компоненту щоразу, коли він відображається.

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 це може бути доступ до розташування та збігу без додавання історії властивостей можна отримати доступ до напрямку без додавання історії властивостей для кожного маршруту.