时间戳

首页 > 解决方案 > 如何在函数调用/手动中调用反应路由器 DOM 链接

javascript - 如何在函数调用/手动中调用反应路由器 DOM 链接

问题描述

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

我的用例：我有一个提交按钮，一旦点击它就会调用一个 POST API。我想检查 POST API 的响应，如果调用成功，它将转到我的链接到我的成功提交页面。如果这是一个错误，我想调用我的错误页面的链接。要考虑的一个因素是 POST API 需要大约 2 秒的时间来响应。

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

这是我当前的代码：

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

标签： javascriptreactjsreact-routeraxiosreact-router-dom

解决方案

使用history.push("/submitSuccess")或history.push("/errorPage")通过route props或react hookhistory提供的对象。useHistory

您可能还希望移除Link包裹按钮，因为这可能会干扰该组件保持安装状态。

如果组件直接由Route组件渲染，那么它会接收路由 props，因此只需history从 props 对象访问

props.history

否则使用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>
  );
};

或者

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

推荐阅读