如何在 function 调用/手动中调用反应路由器 DOM 链接

Question

The high level task I would like to do is to call a Link from react-router-dom inside a function call.

My use case: I have a submit button which once clicked calls a POST API. I want to check the response of the POST API and if it is successful call it will go to my Link to my successful submission page. If it is an error I would like to call the Link to my error page. One factor to consider is that the POST API takes about 2 seconds to respond.

Ideally I would like the Link component to not be directly on the submit button component. I would like to call a function once the button is clicked which contains the Link component after my API responds.

Here is my current code:

    function SubmitFcn(){

const submitPostAPI = (async () => {await axios({
//data passed 
})
      .then(function (response) {
//here is where I capture the API response
 })
      .catch(function (error) {});
  });

return (
    <div>
      <Link to="/SubmitPage" style={{ textDecoration: "none" }}>
        <Button
           disabled={btnDisabled}
          id="submitButtonFormPOST"
          variant="contained"
          color="primary"
          onClick={submitPostAPI}
          data-testid="submitButtonelement"
        >
          {" "}
          Submit
        </Button>
      </Link>
    </div>
  );
}
}

 

Here is what I would like my code to resemble, the problem is it is not compiling because I am calling the Link component incorrectly.

  function SubmitFcn(){

const submitPostAPI = (async () => {await axios({
//data passed 
})
      .then(function (response) {
//here is where I capture the API response
LinkFunction(response.status)
 })
      .catch(function (error) {});
  });

return (
    <div>
      <Link to="/SubmitPage" style={{ textDecoration: "none" }}>
        <Button
           disabled={btnDisabled}
          id="submitButtonFormPOST"
          variant="contained"
          color="primary"
          onClick={submitPostAPI}
          data-testid="submitButtonelement"
        >
          {" "}
          Submit
        </Button>
      </Link>
    </div>
  );
}
}

function LinkStatus(result){
if(result === 201){
<Link to="/Submitsucess"/>}

else{
<Link to="/ErrorPage:/>
}
}

Answer 1

Use history.push("/submitSuccess") or history.push("/errorPage") via the history object provided from route props or useHistory react hook.

You likely may also want to remove the Link wrapping the button as that can interfere with this component remaining mounted.

If the component is directly rendered by a Route component then it receives the route props, so just access history from the props object

props.history

otherwise use the useHistory react hook

const history = useHistory();

So component could look similar to either of these

const MyComponent = ({ history }) => {
  const submitPostAPI = async () => {
    await axios({
      //data passed
    })
      .then(function (response) {
        linkStatus(response.status);
      })
      .catch(function (error) {
        history.push("/errorPage"); // <-- go to error page here as well
      });
  };

  function linkStatus(result) {
    if (result === 201) {
      history.push("/submitSuccess");
    } else {
      history.push("/errorPage");
    }
  }

  return (
    <div>
      <Button
        disabled={btnDisabled}
        id="submitButtonFormPOST"
        variant="contained"
        color="primary"
        onClick={submitPostAPI}
        data-testid="submitButtonelement"
        type="button"
      >
        Submit
      </Button>
    </div>
  );
};

or

const MyComponent = ( ) => {
  const history = useHistory();

  const submitPostAPI = async () => {
    await axios({
      //data passed
    })
      .then(function (response) {
        linkStatus(response.status);
      })
      .catch(function (error) {
        history.push("/errorPage"); // <-- go to error page here as well
      });
  };

  function linkStatus(result) {
    if (result === 201) {
      history.push("/submitSuccess");
    } else {
      history.push("/errorPage");
    }
  }

  return (
    <div>
      <Button
        disabled={btnDisabled}
        id="submitButtonFormPOST"
        variant="contained"
        color="primary"
        onClick={submitPostAPI}
        data-testid="submitButtonelement"
        type="button"
      >
        Submit
      </Button>
    </div>
  );
};