React router Link to conditionally render button

Question

I have a button with an onclick that takes it to a function which displays an alert asking "are you sure". If the person clicks ok on the alert, I would like the link to go to a certain page. If they click cancel, I would like it to go to a different page. Here is what I have...

        <Link to="/calibrateAir" params={{ moisture: props.moisture }}>
            <MyButton onClick={() => {calibrateAgain()}}>
                Calibrate Again
            </MyButton>
        </Link>

and the function...

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) => {
            alert(response.data)
        }, (error) => {
            console.log(error)
        })
    }
}

Basically I want to render "/calibrateAir" if alertwindow is true else "/".

jean182 · Accepted Answer · 2021-09-15T00:20:34.633

4

Don't use a link component(because nesting a button inside an anchor tag is bad html writing), 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>
 );
 }

edited Sep 15 '21 at 00:20

answered Dec 21 '20 at 17:20

jean182

3,213
2
16
27

I get this error 'useHistory' is not defined no-undef – Justin Oberle Dec 21 '20 at 17:23
Did you import this: import { useHistory } from "react-router-dom"; ? – jean182 Dec 21 '20 at 17:25
Woops. I imported but now it says object is not a function for the useHistory line – Justin Oberle Dec 21 '20 at 17:29
which version of react router you're using? – jean182 Dec 21 '20 at 17:30
"react-router-dom": "^5.2.0" – Justin Oberle Dec 21 '20 at 17:33
1

I am sorry. I had a typo in my import. this is working now. Thanks! – Justin Oberle Dec 21 '20 at 17:35
Why does the Link component not work? Had the same issue and it works without Link... Thanks and whyyy :)? – Robin Aegerter Jul 26 '21 at 09:25
Because nesting a button inside an a tag is not valid html5, and for the requirements of this question the Link did not make any sense because we need to do some extra stuff before we could be able to redirect the user to another page. – jean182 Jul 27 '21 at 14:04

React router Link to conditionally render button

1 Answers1