该load事件可能不是很可靠，因为在加载 DOM 之后您的组件可能不会被挂载。相反，您可以使用React 组件的生命周期方法在您的组件挂载到页面时做出响应。例如：

function Component() {
  useEffect(() => alert(1), []);

  return (
    <h1>hello world!</h1>
  );
}

您可以在文档中找到有关 Effect 钩子的更多信息。将它与空数组一起使用使它像 componentDidMount()类组件一样工作。

我强烈建议您避免使用诸如window.addEventListener或 之类的侦听器直接引用 DOM document.addEventListener。事实上，这就是为什么您使用 React 而不是 jQuery 来创建虚拟 DOM 而不是直接向真实 DOM 收费并降低 Web 性能的原因。

在 React 中，你有React 钩子来实现你想要做的事情。它们公开了一堆触发某些事件的生命周期方法。在您的情况下，useEffect符合您的要求。这个钩子类似于componentDidMount()和componentDidUpdate()：

通过使用这个 Hook，你告诉 React 你的组件需要在渲染后做一些事情。React 会记住您传递的函数（我们将其称为“效果”），并在执行 DOM 更新后稍后调用它。在这个效果中，我们设置了文档标题，但我们也可以执行数据获取或调用其他一些命令式 API。

由于 Strapi 支付和 Safari 移动（需要等待页面加载）的需要，我混合了钩子和您的方法，以确保在加载页面时触发效果。

应用于您的代码：

const Page = () => {

  useEffect(() => {
     if (typeof window !== `undefined`) { window.addEventListener('load', () => handleClick()) }
  }, []);

  return (
    <section >

      <button role="link" onClick={handleClick}> //Only for fallback
      Press
    </button>

    </section>
  );
};

export default Page;

基本上，useEffect一旦加载了 DOM 树，代码就会触发该函数并执行您的handleClick函数。[]调用作为参数传递的空数组 ( ) deps；意味着你只触发一次效果。当然，它适用于所有浏览器，因为它是 React 功能。

如果您只想在加载页面中触发一个函数并将其重定向到另一个 url，您可以使用这样的自动调用函数

(function(){
alert('Beginning');
if (typeof window !== 'undefined') {
    const param = new URLSearchParams(window.location.search).get('param');
}
if (param !== 'undefined' && param !== null $$ param!==[]){
    window.location.href = 'your_new_url_string?param='+param;
}
})();