Javascript 在使用react router之后，onClick事件不是第一次启动函数，并且在那之后工作正常

当我没有在BrowserRouter和Route中使用React时，React可以正常工作，在使用React router之后，onClick事件不会在第一次启动该功能，并且在那之后可以正常工作

这是我需要在onClick上触发的函数

function clickHandler() {
    
const signUp = document.getElementById("signUp");
const signIn = document.getElementById("signIn");
const container = document.getElementById("container");

signUp.addEventListener("click", () => {
  container.classList.add("right-panel-active");
});

signIn.addEventListener("click", () => {
  container.classList.remove("right-panel-active");
});

    }

这是我正在呈现的表单的代码

      <div className="container" id="container">
        <div className="form-container sign-up-container">
          <form action="#">
        </div>
        <div className="form-container sign-in-container">
            <button>Sign In</button>
          </form>
        </div>
        **<div onClick={clickHandler} className="overlay-container">**
          <div className="overlay">
            <div className="overlay-panel overlay-left">
              <button className="changeForm" id="signIn">
                Sign In
              </button>
            </div>
            <div className="overlay-panel overlay-right">
              <button className="changeForm" id="signUp">
                Sign Up
              </button>
            </div>
          </div>
        </div>

登录
****
登录
注册

---反应路由器代码---

函数应用程序（）{
返回(
);
}

点击事件应通过提供的合成事件进行注册

// React function component
const ComponentA = () => {
    // Create on click function using useCallback (function component ONLY)
    // This ensures the function is not recreated on each rerender.
    const onButtonClick = React.useCallback((event) => {
        alert('Button Clicked')
    }, []);

    // Render view (attaching on click function to the button)
    return (
        <button
            onClick={onButtonClick}
        >
            Test
        </button>
    )
};

//React函数组件
常量组件A=（）=>{
//使用useCallback创建单击函数（仅限函数组件）
//这可确保不会在每个重新渲染器上重新创建函数。
const onButtonClick=React.useCallback（（事件）=>{
警报（'单击按钮'）
}, []);
//渲染视图（将单击功能附加到按钮）
返回(
试验
)
};

在React中，您应该使用提供的合成事件，而不是创建自己的事件侦听器（除非实际需要）。按钮将提供一个

onClick

属性，该属性允许您提供一个函数

（事件：React.MouseEvent）=>void

，以便在单击元素时运行。

// React function component
const ComponentA = () => {
    // Create on click function using useCallback (function component ONLY)
    // This ensures the function is not recreated on each rerender.
    const onButtonClick = React.useCallback((event) => {
        alert('Button Clicked')
    }, []);

    // Render view (attaching on click function to the button)
    return (
        <button
            onClick={onButtonClick}
        >
            Test
        </button>
    )
};