Javascript NextJS导航到相同页面和不同查询不会触发钩子

使用NextJS，没有SSR。 尝试使用不同的查询参数进行基本导航。首次到达页面/组件后。组件被挂载，钩子不再被触发（钩子不会触发我对后端的任何异步调用），但是我看到url参数发生了变化

<Link
  key={booking.booking_ID}
  href={{ pathname: '/booking', query: { id: booking.booking_ID } }}
  replace>
  <SomeFancyButtonHere /
</Link>

预订页面挂钩：

  // component
  const query = queryString.parse(window.location.search);
  const { id } = query;
  useEffect(() => {
    fetchBookingById(id);
  }, []);

  return <SomeJsxStuffForBookingPage />

---

基本上我最后做的是：

const CartItem = ({ setActiveBookingId }) => (
<FancyButton
  onClick={async () => {
    await Router.push({ pathname: '/booking', query: { id: booking.booking_ID } });
    setActiveBookingId(booking.booking_ID);
  }}
/>)

const mapStateToProps = () => ({});
const mapDispatchToProps = {
  setActiveBookingId,
};
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(CartItem);

减速器

case types.SET_ACTIVE_BOOKING_ID: {
  return {
    ...state,
    activeBooking: action.id,
  };
}

最终用于获取数据

  useEffect(() => {
    if (id === activeBooking) {
      fetchBookingById(id);
      resetBookingCancelAndUpdate();
    }
  }, [activeBooking]);

export const setActiveBookingId = id => ({
  type: types.SET_ACTIVE_BOOKING_ID,
  id,
});

case types.SET_ACTIVE_BOOKING_ID: {
  return {
    ...state,
    activeBooking: action.id,
  };
}

  useEffect(() => {
    if (id === activeBooking) {
      fetchBookingById(id);
      resetBookingCancelAndUpdate();
    }
  }, [activeBooking]);