Question

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

提交表单会将用户带到主页（/ home），但还需要将道具传递给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} />

    ...

但是NavBar（基于类）组件中的this.props.propOne不确定。我认为这可能是由于NavBar在其他组件之一中已经在没有道具的情况下渲染的。

所以我的问题是-您可以使用this.props.history.push来将prop传递到与路径名称路径之一不同的组件吗？

Answer 1

使用历史推送时，在推送函数的第二个参数中传递你想要的任何数据

this.props.history.push('/yourPath', {prop1: someData});

然后在其他组件中访问此数据

const data = this.props.history.location.state;
// data will be {prop1: someData}

Answer 2

在您刚编辑的第二个块中，响应即将传入时，它将重定向到/ home，因此不会调用return语句，因为它现在已到达主页。这就是您将propOne定义为未定义的原因。要在“首页”中使用，请将props值赋予主页，而在home主页渲染中，您可以将所需的props值推送至导航栏。 使用这种方式传递道具值：

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

然后在Main Page中获取prop值：（如果Main Page是基于类的组件，请不要使用它）

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

然后在组件中使用propValue。

尝试console.log(this.props.location)并查看要获得清晰显示的所有值。

主页：

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

Answer 3

我实际上解决了这个问题。

仅针对存在相同问题的任何人：如果您对道具有任何疑问，只需使用Cookie或localStorage来移动变量

但是，如果有人对如何用道具解决这个问题有任何想法，请随时分享答案

您可以使用this.props.history.push来将prop传递到路径名所不称的组件吗？

3 个答案: