Question

我有一个具有形式的功能组件。 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不是函数

Answer 1

我认为您使用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 
        } 
     }
  }
}

Answer 2

如果您在功能组件中使用import { withRouter } from "react-router-dom";，是否不缺少props.history.push？

Answer 3

您可以使用 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>
  );
}

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

3 个答案: