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

Question

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

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

我得到了这个错误：-

Unexpected use of 'history' no-restricted-globals

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

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

出现新错误：-

Unhandled Rejection (TypeError): window.history.push is not a function

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

Answer 4

而不是history.push尝试使用导航

import { useNavigate } from 'react-router-dom';

const addToCartHandler = () => {
  navigate(`/cart/${productId}?qty=${qty}`)
};

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

how to use in Reactjs functional component history.push

history

push

reactjs