使用React路由器发送状态不起作用

时间:2019-07-11 10:17:38

标签: reactjs react-router

我在项目中使用react version ^16.8.1react-router-dom version ^4.3.1
我正在尝试使用React Router发送状态信息,

      this.props.history.push({
        pathname: '/',
        state: {
          successMessage: this.generateSuccessMessage(payload)
        }
      });

在另一个组件中,我试图获取该状态并将其作为道具发送给子组件,如下所示:

successMessage={this.props.location.state ? this.props.location.state.successMessage : null}

但是,每次触发推送时,我都会不断得到null。我已经在react开发工具中检查了state,并用Jest进行了测试,但是两者都表明state没有转发到其他组件。以下是相关路线。我正在将状态从OppgaveEditor推向历史,并试图将其包含在Dashboard组件中。

     <Switch>
          <Route exact path="/" render={(props) => <Redirect to="/dashboard" />} />
          <Route path="/dashboard" render={(props) => <Dashboard user={this.state.user} {...props} ><OppgaveDashboard/></Dashboard>}/>} />
          <Route path="/oppgave-editor/:id" render={(props) => <OppgaveEditor user={this.state.user} {...props} />}/>
          <Route component={NotFound}/>
     </Switch>

我在做什么错,我该如何解决?

2 个答案:

答案 0 :(得分:1)

我猜您在重定向到“ /”时丢失了state。您需要转发它。

它应该给你这样的东西

 <Route exact path="/" render={(props) => <Redirect to={{
      pathname: '/',
      state: this.props.location.state
    }}
 />

答案 1 :(得分:0)

基于Gael的回答,我发现这种方法很适合我:

<Route exact path="/home" render={ props => <Home {...props} />} />