如何在 Reactjs 功能组件中使用 history.push

IT技术 reactjs push history
2021-04-30 12:19:11

我有一个具有形式的功能组件。Onsubmit 调用我想重定向到另一个页面。 

function ProfileForm(props) {
 // many code removed
 const onSubmit = (data, e) => {
   e.target.reset();
   history.push({
  pathname:  "/OnSubmit",
  state: {
    response: messageFromServer 
   } 
  }
}
// many code removed
}

我有这个错误：-

意外使用“历史”无限制全局变量

在谷歌搜索错误后，我找到了类似的位置答案。答案是： Try adding window before location (i.e. window.location). 所以我试过：-

  window.history.push({
  pathname:  "/OnSubmit",
  state: {
    response: messageFromServer 
  } 
}

出现新错误：-

未处理的拒绝（TypeError）：window.history.push 不是函数

3个回答

我认为您使用react-router. 如果是这样，您需要使用通过ReactRouterContext. 为此，您需要使用useHistory钩子来获取history对象。

// ...
import { useHistory } from "react-router";
// ...


function ProfileForm(props) {
  const history = useHistory();
  const onSubmit = (data, e) => {
     e.target.reset();
     history.push({
        pathname:  "/OnSubmit",
        state: {
          response: messageFromServer 
        } 
     });
  }
}

如果你import { withRouter } from "react-router-dom"; 在你的功能组件中使用，你是不是错过了props.history.push？

您可以使用 useHistory()。以下代码可以帮助您。

import { useHistory } from "react-router";

export default function Checkout(props) {
    
const history = useHistory();
 
return (
              <React.Fragment>
                <AddressForm history ={ history} ></AddressForm>
              </React.Fragment>
        </Paper>
      </main>
    </React.Fragment>
  );
}
其它你可能感兴趣的问题
上一篇jQuery fullCalendar 在标题上显示未定义 下一篇写入文本或 JSON 文件以与节点react