Question

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

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

NextJS导航到同一页面并且不同的查询不会触发钩子

1 个答案: