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

импорт {withRouter} из 'response-router-dom';

class Foo расширяет React.Component {
  // ...
}

экспорт по умолчанию withRouter (Foo);

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

LondonRob

Ответов: 6

Ответы (6)

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


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

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

render() {
  return (
); }

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

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

export default withRouter(Header)

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

По умолчанию реагирующий маршрутизатор не передает всю информацию компоненту, на который мы ссылаемся

например - если у нас есть маршрут для компонента, как показано ниже

 
            

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

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

, а затем использовать его при экспорте компонента

export default withRouter(Details);

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


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

это компонент более высокого порядка, который будет передавать обновленные свойства соответствия, местоположения и истории обернутому компоненту при каждом рендеринге. но я думаю, что он устарел через реактивный маршрутизатор V6. в случае использования его свойства вы можете использовать как useLocation, так и usenavigate хуки.

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

export function withRouter(children){
    return(props)=>{
       const location = useLocation();
       const navigate = usenaviogate();
       return 
                    }
        }

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

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

Вот полный пример со страницы 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 
You are now at {location.pathname}
; } } // Create a new component that is "connected" (to borrow redux // terminology) to the router. const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

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

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

импортировать React из "react";
импортировать PropTypes из "prop-types";
импорт {withRouter} из "реактивного маршрутизатора";

// Простой компонент, который показывает путь к текущему местоположению
class ShowTheLocation расширяет React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    расположение: PropTypes.object.isRequired,
    история: PropTypes.object.isRequired
  };

  оказывать() {
    const {совпадение, местоположение, история} = this.props;

    return 
Теперь вы находитесь в {location.pathname}
; } } // Создаем новый компонент, который "подключен" (чтобы заимствовать redux // терминология) к маршрутизатору. const ShowTheLocationWithRouter = withRouter (ShowTheLocation);

2022 WebDevInsider