你能使用this.props.history.push将道具传递给一个与路径名不同的组件吗？

Question

我正在使用this.props.history.push在提交表单后将道具传递给组件。

提交表单后，用户会进入主页（home），但它也需要将道具传递给NavBar组件，而NavBar组件并不包含在react-router路由中。

 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（基于类）组件变得未定义。我想这可能是由于NavBar已经在其他组件中被渲染过而没有道具造成的。

所以我的问题是--你能使用this.props.history.push将道具传递给一个不同于路径名路由的组件吗？

Answer 1

在你刚刚编辑的第2个块中，当响应进入时，它被重定向到主页，所以返回语句没有被调用，因为它现在已经被降落到主页了。为了在主页中使用，将props值给主页，在主页渲染时，你可以将所需的props值推送给导航栏。使用这种方式来传递道具值 :

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

并在Main Page中获取道具值。(如果主页是一个基于类的组件，否则不要使用这个)

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

然后用 propValue 的组件中。

尝试 console.log(this.props.location) 并检查你得到的所有值有清晰的视图。

主页 。

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

Answer 2

其实我已经解决了这个问题。

仅供有同样问题的人参考。如果你在使用道具时遇到任何问题，就使用Cookies或localStorage来移动变量。

但如果有谁知道如何用道具解决，欢迎分享答案。