您可以使用 this.props.history.push 将 props 传递给与路径名所示不同的组件吗？

Question

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

提交表单会将用户带到主页（/home），但它还需要将 props 传递给 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在导航栏（基于类）组件中未定义。我认为这可能是由于导航栏已经在其他组件之一中没有道具的情况下渲染的。

所以我的问题是 - 你可以使用 this.props.history.push 将 props 传递给与路径名路由不同的组件吗？

Answer 1

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

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

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

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