отреагировать на маршрутизатор ссылку на следующий вид, только если я получу ответ от запроса API

Question

Так что я использую реагирующее маршрутизатор-дом, здесь, когда я нажимаю на эту ссылку, она должна запустить функцию с запросом 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

use withRouter from 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

Answer 2

В таком случае вместо использования ссылки используйте обычный 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>