NextJS導航到同一頁面和不同的查詢不會觸發掛鈎

Question

使用NextJS，沒有SSR。 嘗試使用不同的查詢參數進行基本導航。 首次到達頁面/組件后。 組件被掛載，並且鈎子不再被觸發（鈎子不會觸發我對后端的任何異步調用）， 但是我看到url params正在改變。

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

還嘗試了路由器推送方法（相同的結果）

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

預訂頁面鈎子：

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

  return <SomeJsxStuffForBookingPage />

目前為止只有解決方案

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

Answer 1

基本上我最終做了什么：

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動作

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