I am facing an error of "TypeError: Cannot read properties of undefined (reading 'push')"

I am facing an error of "TypeError: Cannot read properties of undefined (reading 'push')"

我在 app.js 组件中使用 history.push('/pathname') 时遇到了这个问题。我的要求是我必须在 app.js 组件中定义的 onclick 处理程序中使用此 history.push,然后通过道具将其发送到按钮组件。我无法找出此错误的解决方案。 (按钮组件是 AppointmentNextBtn)。请指导我。

import { useHistory } from "react-router-dom";
function App(){
  const history = useHistory();
  const onClickNextDateHandler = () => {
history.push("/selectlocation/appointment/selectdate");
console.log("date button runs");
setNextBtnState("time");

};

return(
<Route exact path="/selectlocation/appointment">
        <Toappointmentcontainer
          postAppointmentRequest={postRequestAppointment}
        />
        <div className="btnwidget">
          <AppointmentNextBtn
            onClickDateHandler={onClickNextDateHandler}
            displayState={nextBtnState}
            text="Next"
            button="button"
          />
        </div>
      </Route>

)

}

您不能在声明路线的同一个文件中使用历史记录。在这种情况下,历史对象将始终不可用。最好的方法是直接在 appointmentNextBtn 中进行。