我在项目中使用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>
我在做什么错,我该如何解决?
答案 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} />} />