Для чего нужен роутер в реакции-роутере-дом?

Question

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

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

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

export default withRouter(Foo);

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

Answer 1

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

Не все компоненты, особенно общие компоненты, будут иметь доступ к реквизитам такого маршрутизатора.Внутри его обернутых компонентов вы сможете получить доступ к location prop и получить больше информации, например, 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);

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

Answer 2

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

* 1002.*

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

Answer 3

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