Question

所以我使用的是react-router-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>

Answer 1

在这种情况下，请使用普通的div并使用history.push导航至预期的路线，而不是使用链接

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>

Answer 2

使用withRouter中的react-router-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);

witRouter会将历史记录道具添加到您的组件中，用于在api成功执行时进行导航

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

2 个答案: