Можно ли использовать this.props.history.pu sh для передачи свойств другому компоненту, отличному от указанного в имени пути?

Question

Я использую this.props.history.pu sh для передачи свойств компонентам после отправки формы.

Отправка формы приводит пользователя на домашнюю страницу (/ home), но также необходимо передать реквизиты компоненту NavBar, который не включен в маршруты реактивного маршрутизатора.

 this.props.history.push({
    pathname: '/home',
    propOne: propOneValue // <-- this prop must be received by NavBar component 
 })

Я пытался сделать что-то вроде этого:

    ...

    }).then((response) => {
     this.props.history.push({
        pathname: '/home',
     })
    return <NavBar propOne={propOneValue} />

    ...

Но this.props.propOne в компоненте NavBar (на основе классов) получает undefined. Я думаю, это может быть вызвано тем фактом, что NavBar уже был отрисован без реквизита в одном из других компонентов.

Итак, мой вопрос - можете ли вы использовать this.props.history.pu sh для передачи props к другому компоненту, отличному от пути path?

Answer 1

Я решил это на самом деле.

Просто для тех, у кого такая же проблема: просто используйте файлы cookie или localStorage для перемещения переменных, если у вас есть проблемы с реквизитами у кого-нибудь есть идея, как решить эту проблему с помощью реквизита, пожалуйста, поделитесь ответом

Answer 2

Во 2-м блоке, который вы только что отредактировали, как только приходит ответ, он перенаправляет на / home, поэтому оператор return не вызывается, так как теперь он был переведен на домашнюю страницу. вот почему вы получаете propOne как undefined. Для использования на домашней странице задайте значение props для домашней страницы, а при рендеринге домашней страницы вы можете указать sh требуемое значение props для панели навигации. Используйте этот способ для передачи значения props :

this.props.history.push({
                pathname: "/home",
                state: {
                    propOne: propOneValue
                }
            });

И на главной странице, чтобы получить значение prop: (если Main Page является компонентом на основе класса, иначе не используйте это)

this.state = {
            propValue: this.props.location.state.propOne,
        }

, затем используйте propValue в компоненте.

Попробуйте console.log(this.props.location) и проверьте, какие все значения вы получаете, чтобы иметь четкое представление.

Главная страница:

render() {
      return (
             <Nav  propVal={this.state.propValue}  />
        )
    }