如果我正在解构我的道具，我如何调用 props.history.push() ？答案

【问题标题】：How do I call props.history.push() if I'm destructuring my props?如果我正在解构我的道具，我如何调用 props.history.push() ？
【发布时间】：2021-05-06 21:57:22
【问题描述】：

如果我有一个功能可以在您单击后退按钮时创建确认弹出窗口，我想在导航回搜索页面之前保存状态。顺序有点奇怪，有一个搜索页面，然后是提交表单页面和摘要页面。我在到达路由器中将替换设置为 true，因此当我返回摘要页面时，它会转到搜索页面。我想保留历史并将提交数据的状态传递到历史中，所以当我单击前进时，它会返回页面而不会出错。

我查阅了一堆指南并浏览了一些文档，我想我对如何构建这个有了一个很好的想法，但是在这个组件中，我们正在解构道具，所以我该如何通过那些进入历史的状态变量？

export const BaseSummary = ({successState, children}: BaseSummaryProps) => {
  let ref = createRef();
  const [pdf, setPdf] = useState<any>();
  const [finishStatus, setfinishStatus] = useState(false);

  const onBackButtonEvent = (e) => {
    e.preventDefault();
    if (!finishStatus) {
      if (window.confirm("Your claim has been submitted, would you like to exit before getting additional claim information?")) {
        setfinishStatus(true);
        props.history.push(ASSOCIATE_POLICY_SEARCH_ROUTE); // HERE
      } else {
        window.history.pushState({state: {successState: successState}}, "", window.location.pathname);
        setfinishStatus(false);
      }
    }
  };

  useEffect(() => {
    window.history.pushState(null, "", window.location.pathname);
    window.addEventListener('popstate', onBackButtonEvent);
    return () => {
      window.removeEventListener('popstate', onBackButtonEvent);  
    };
  }, []);

另外我没有传入子变量，因为历史不会克隆 html 元素，我只想传入为该组件返回的表单数据以相应地呈现信息

【问题讨论】：

标签： reactjs typescript browser-history reach-router

【解决方案1】：

首先，我认为你需要使用“useHistory”来直接处理你的hsitry而不做很多复杂的条件，你可以从here查看更多

for example:
 let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

现在，如果您需要以这种方式或通过您的代码通过 props 传递您的历史记录，只需将其放入函数中并将其自身传递给函数，那么当您销毁时，您只需要编写您的函数名称...例如：

  function handleClick() {
    history.push("/home");
  }

  <MyComponent onClick={handleClick} />

  const MyComponent = ({onClick}) => {....}

【讨论】：

我同意你的观点，但在这个项目中我只使用到达路由器，并且已经找到了处理这种情况的方法，我会稍后发布更新版本
你可以使用任何你想要的东西，这只是一个例子，只需在函数中传递你的代码......你可以在道具中随意调用它......祝你好运

【解决方案2】：

我修好了。我们正在使用到达路由器，所以每次我们在提交表单页面中导航时，我们都会使用如下替换函数：{replace: true, state: {...stateprops}}。然后我创建了一个覆盖后退按钮功能的通用组件，每次单击后退时都会重置历史堆栈，并使用 preventdefault 来阻止它重新加载页面。然后我创建了一个变量来判断window.confirm是否被按下，当按下时，我再调用history.back()。

在某些情况下，当我们访问到达路由器之外的外部页面时，替换不起作用，我只是在导航之前使用了 window.history.replaceStack()（这是到达路由器本质上对他们的调用所做的事情） .

无论如何，您都可以将此组件包装在您希望后退按钮行为弹出窗口生效的任何位置，并在 backButtonBehavior 函数中传递successState（无论您传递到当前页面的任何道具）。

这是我的代码：

import React, {useEffect, ReactElement} from 'react';
import { StateProps } from '../Summary/types';

export interface BackButtonBehaviorProps {
  children: ReactElement;
  successState: StateProps;
}

let isTheBackButtonPressed = false;

export const BackButtonBehavior = ({successState, children}: BackButtonBehaviorProps) => {
  const onBackButtonEvent = (e: { preventDefault: () => void; }) => {
    e.preventDefault();

    if (!isTheBackButtonPressed) {
      if (window.confirm("Your claim has been submitted, would you like to exit before getting additional claim information?")) {
        isTheBackButtonPressed = true;
        window.history.back();
      } else {
        isTheBackButtonPressed = false;
        window.history.pushState({successState: successState}, "success page", window.location.pathname); // When you click back (this refreshes the current instance)
      }
    } else {
      isTheBackButtonPressed = false;
    }
  };

  useEffect(() => {
    window.history.pushState(null, "", window.location.pathname);
    window.addEventListener('popstate', onBackButtonEvent);
    return () => {
      window.removeEventListener('popstate', onBackButtonEvent);  
    };
  }, []);

  return (children);
};

【讨论】：