Javascript 如何在ReactJS中在页面之间路由时重新加载Ajax请求

我是ReactJS的新手，我正在尝试在我正在从事的一个项目中使用它。我使用嵌套路由加载组件，但我怀疑由于我的项目的结构，嵌套路由根本没有使用它的处理程序。因此，当我使用Back按钮时，没有第一个ajax请求的历史记录，但它会不断显示第二个请求的结果

我有一个父组件，它执行ajax请求：

var=React.createClass({
getInitialState:函数（）{
返回{
compData:[]，
id:“”，
隐藏：错，
}
},
componentDidMount:function（）{
axios.get（this.props.source{
标题：{'X-Auth-Token'：'************************'，
“内容类型”：“应用程序/json”}
})
。然后（结果=>{
this.setState（{compData:result.data}）；
})
.catch（错误=>{
console.log（错误）；
});
},
changeId：函数（newId）{
这是我的国家({
id:newId
});
},
render:function（）{
返回(
);
}
});
模块出口=竞赛；

Competitions

组件将结果数据传递给其子级

CompTable

var CompTable=React.createClass({
道具类型：{
compData:React.PropTypes.array.isRequired
},
getInitialState:函数（）{
返回{
showTeams:this.props.showTeams，
隐藏：这个。道具。隐藏，
};
},
团队单击：函数（）{
这是我的国家({
showTeams:！this.props.showTeams，
隐藏：！this.props.hide，
});
},
handleClick:函数（e）{
this.props.onClick（e）；
},
render:function（）{
var hide=this.state.hide；
var list=this.props.compData.map（函数（comp，i）{
返回(
{i+1}
{comp.caption}
{公司联盟}
{comp.numberOfTeams}
);
}，这个）；
如果（隐藏）{
返回(
{this.state.showTeams？：null}
)
}
否则{
返回(
{list}
)
}
});
module.exports=CompTable；

在

CompTable

组件中，我有一个条件呈现。因此，第一次调用ajax时，它加载竞赛表，然后在单击竞赛时，我获取单击的团队id并加载子组件

Teams

，该组件执行第二个ajax请求：

var Teams=React.createClass({
getInitialState:函数（）{
返回{
团队数据：[]，
}
},
componentWillMount:function（）{
this.dataSource（）；
},
组件将接收道具：函数（下一步）{
this.dataSource（nextProps）；
},
数据源：函数（道具）{
道具=道具| | this.props；
var url='1〕http://api.football-data.org/v1/competitions/x/teams';
var source=url.replace（url.split（'/'）[5]，this.props.id）；
axios.get（源代码{
标题：{'X-Auth-Token'：'************************'，
“内容类型”：“应用程序/json”}
})
。然后（结果=>{
this.setState（{teamData:result.data.teams}）；
})
.catch（错误=>{
console.log（错误）；
});
},
render:function（）{
返回(
);
}
});
module.exports=团队；

我正在用路由器发布

索引
文件：

var-app=document.getElementById（'app'）；
var competitionswapper=React.createClass({
渲染：函数（）{
返回(
);
}
});
ReactDOM.render(
,
应用程序）；

每次加载比赛表时，我都可以通过单击比赛来加载团队表，当我使用后退按钮时，没有新的ajax请求，但我仍然可以看到加载的团队表，并且我可以从Chrome开发者工具中看到相同的团队被重新加载。当我使用按下“后退”按钮，或者是否有其他方法可以使浏览器历史正常工作？
componentDidMount
将不会再次调用，除非组件先卸载（转到完全不同的路径）.但是，
组件将接收道具
将在您击中背部时开火button@azium如果我完全删除
handler={Teams}
没有任何变化，一切正常，因为显然
团队
组件在
CompTable
中被调用，路由器根本不使用它。哦..你为什么要使用
处理程序
而不是
组件
？你使用的是什么版本的react路由器？@azium你说得对，我不应该使用
handler
，我使用的是3.0.0版，但我认为是一样的。我用
component
替换了它，但它也不起作用。
componentDidMount
将不会被再次调用，除非组件先卸载（转到完全不同的路径）.但是，
组件将接收道具
将在您击中背部时开火button@azium如果我完全删除
handler={Teams}
没有任何变化，一切正常，因为显然
团队
组件在
CompTable
中被调用，路由器根本不使用它。哦..你为什么要使用
处理程序
而不是
组件
？你使用的是什么版本的react路由器？@azium你说得对，我不应该使用
handler
，我使用的是3.0.0版，但我认为是一样的。我用
组件替换了它，但它也不起作用。