React router Link to conditionally render button

Don't use a link component, use react router history to accomplish what you want. For example if you are using a functional component you can do

import React from "react";
import { useHistory } from "react-router-dom";

 export default function YourComponent() {
  const history = useHistory()

  function calibrateAgain() {
   const user = localStorage.getItem('user')
   const alertWindow = window.confirm("Are you sure you want to calibrate?")
   if (alertWindow) {
    axios.post("http://localhost:3001/api/calibrate", 
    {airValue: null, waterValue: null, user: user}).then((response) => {          
        // Push to the calibrateAir if response succeeds
        history.push("/calibrateAir");
        alert(response.data)
     }, (error) => {
        // Push to the / if response fails
        history.push("/");
        console.log(error)
     })
    } else {
      // Push to the / if user press cancel in the alert
      history.push("/");
    }
  }

  return (
    <MyButton onClick={calibrateAgain}>
      Calibrate Again
    </MyButton>
 );
 }