NextJS navigation to same page and different query wont trigger hooks

Question

Using NextJS, no SSR. Trying to do basic navigation, with different query params. After first arrival on the page/component. Component gets mounted, and hooks are no longer being triggered (hooks wont fire any of my async calls to the backend), HOWEVER I see the url params changing.

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

Also tried Router push approach (same results)

onClick={() => Router.push({ pathname: '/booking', query: { id: booking.booking_ID } })}

Booking page hook:

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

  return <SomeJsxStuffForBookingPage />

Only solution so far:

onClick={() => {
  Router.push({ pathname: '/booking', query: { id: booking.booking_ID } });
  setTimeout(() => {
    location.reload();
  }, 600);
}}

Answer 1

Essentially what I ended up doing:

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);

Redux action

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

Reducer

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

Final for fetching data

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