Reactjs 仅当我从api请求获得响应时，才将路由器链接反应到下一个视图

所以我使用的是react路由器dom，在这里，当我点击这个链接时，它应该会触发一个带有api请求的函数。我想做的是，在我从这个函数中发出的请求中得到响应之前，不要移动到它链接到的下一个组件

postFinal = () =>{
    fetch('', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: 
    })
}



 <div className="row">
   <Link to={`/itemSelection/Confirmation`} className="btn" onClick={this.postFinal}>DONE</Link>
 </div>

postfail=（）=>{
取（“”{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：
})
}
完成

在这种情况下，不要使用link，而是使用普通div并使用

历史记录。按

导航到预定路线

postFinal = () =>{
    fetch('', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: 
    }).then(() => {
        this.props.history.push('/itemSelection/Confirmation')
    })
}



 <div className="row">
   <div className="btn" onClick={this.postFinal}>DONE</Link>
 </div>

postfail=（）=>{
取（“”{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：
}).然后（（）=>{
this.props.history.push（“/itemSelection/Confirmation”）
})
}
完成

使用

路由器
从
反应路由器dom

import React from 'react';
import {withRouter} from 'react-router-dom'


class Home extends React.Component{
 postFinal = () =>{
    fetch('', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: 
    }).then(s=>s.json())
      .then(data=>{
        this.props.history.push('/itemSelection/Confirmation') // this will redirect
    })

}
render(){
 <div>
  <p onClick={this.postFinal}>this is your new link</p>
  </div>
 }

}
export default withRouter(Home);

从“React”导入React；
从“react router dom”导入{withRouter}
类Home扩展了React.Component{
期末考试后=（）=>{
取（“”{
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
},
正文：
}).然后（s=>s.json（））
。然后（数据=>{
this.props.history.push（'/itemSelection/Confirmation'）//这将重定向
})
}
render（）{
这是您的新链接
}
}
使用路由器导出默认值（主）；

witRouter将向您的组件添加历史道具，这些道具将用于在api成功时naivgate