如何调用/手动调用响应路由器DOM链接

问题描述

我想做的高级任务是在函数调用中从react-router-dom调用Link。

我的用例：我有一个提交按钮，单击该按钮将调用POST API。我想检查POST API的响应，如果调用成功，它将转到我的链接到成功提交页面。如果是错误，我想调用“链接到我的错误”页面。要考虑的因素之一是POST API大约需要2秒钟才能响应。

理想情况下，我希望链接组件不直接位于提交按钮组件上。一旦我的API响应后，单击包含链接组件的按钮，我想调用一个函数。

这是我当前的代码：

    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>
  );
}
}

 

这是我希望我的代码看起来像的东西，问题是由于我未正确调用Link组件而无法编译。

  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:/>
}
}

解决方法

通过route props或useHistory反应钩子提供的{ "errorMessage": "Unable to import module 'lambda_function': \n\nIMPORTANT: PLEASE READ THIS FOR ADVICE ON HOW TO SOLVE THIS ISSUE!\n\nImporting the numpy C-extensions failed. This error can happen for\nmany reasons,often due to issues with your setup or how NumPy was\ninstalled.\n\nWe have compiled some common reasons and troubleshooting tips at:\n\n https://numpy.org/devdocs/user/troubleshooting-importerror.html\n\nPlease note and check the following:\n\n * The Python version is: Python3.7 from \"/var/lang/bin/python3.7\"\n * The NumPy version is: \"1.19.1\"\n\nand make sure that they are the versions you expect.\nPlease carefully study the documentation linked above for further help.\n\nOriginal error was: No module named 'numpy.core._multiarray_umath'\n","errorType": "Runtime.ImportModuleError" } 对象使用history.push("/submitSuccess")或history.push("/errorPage")。

您可能还希望移除包裹按钮的history，因为这可能会干扰此组件的安装状态。

如果该组件是直接由Link组件渲染的，则它将接收路线道具，因此只需从props对象访问Route

history

否则请使用props.history react钩子

useHistory

因此组件可能看起来与其中任何一个相似

const history = useHistory();

或

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>
  );
};