title: Why is my react router calling apis twice?
body: <p>I have explored whole web for the solution but nothing worked for me as expected.
  My Api's are being called twice, resulting in duplicating data in db. I want them to trigger just once.</p>
  <p>Find the code below:</p>
  <pre><code>   &lt;Route
          path=&quot;/apis/wallet_verification&quot;
          render={(routerProps) =&gt; {
            //deals with some params
            console.log(&quot;I am triggering&quot;);
  
            axios.get(`http://website/apis/save_ride_payments?payment_type=WALLET`).then((saveRides) =&gt;{
              
              console.log(&quot;I am inside get&quot;);
  
              axios.post(`http://website/apis/verify_token?token=${usertoken}`).then((response) =&gt; {
  
                if(response.data.status !== &quot;error&quot;) {
                  console.log(&quot;I am inside post&quot;);
                  routerProps.history.push({
                    pathname: '/paymentsuccess',
                    state: {initRide}
                  });
                }
              })
            })
            console.log(&quot;I am out&quot;);
            return (
              &lt;div&gt;
                Wallet Transaction
              &lt;/div&gt;
            )   
          }}
        /&gt;
  </code></pre>
  <p>Output of console:</p>
  <pre><code>I am triggering
  I am out
  I am inside get
  I am triggering
  I am out
  I am inside post
  I am inside get
  I am inside post
  </code></pre>
  <p>Network tab is showing this Api sequence:</p>
  <pre><code>save_ride_payments
  verify_token
  save_ride_payments
  verify_token
  </code></pre>
  <p>my index.js</p>
  <pre><code>ReactDOM.render(
  &lt;Provider store={store}&gt;
      &lt;App /&gt;
  &lt;/Provider&gt;,
  document.getElementById('root'));
  </code></pre>
  <p>Definitely, there might be some logical mistake. Would love if someone were to point that out.</p>