Question

我在项目中使用react version ^16.8.1和react-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>

我在做什么错，我该如何解决？

Answer 1

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

它应该给你这样的东西

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

Answer 2

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

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

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

2 个答案: