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