NextJs 路由到具有不同查詢的同一頁面

Question

我有一個 web 應用程序，其中包含用戶配置文件。 現在用戶有一個配置文件，url 看起來像：

domain.com/profile?id=123

而自我介紹看起來像

domain.com/profile

在安裝 (useEffect[]) 時，我正在獲取適當的用戶數據，例如。 用於查詢用戶 id 123 或登錄用戶個人資料的用戶數據，如果兩者都失敗，則重新路由到主頁。

現在問題來了，當我想從 go

domain.com/profile?id=123

至

domain.com/profile

或任何其他具有 ID 的個人資料。

當用戶使用瀏覽器的后退 (?id=123) 和前進 (?id=124) 按鈕到這些路由器時，我可以解決這個問題：

  router.beforePopState(({ url }) => {
    const paramsString = _.replace(url, '/profile?', '');
    const params = new URLSearchParams(paramsString);
    const profileId = params.get('id');
    const notEmptyProfileId = profileId && profileId !== '';
    if (!notEmptyProfileId) userProfileFetchingFunction(profileId);
    if (notEmptyProfileId) selfProfileFetchingFunction();
    return true;
  });

然而，問題。 個人資料頁面有一個 NextJs

<Link href="/profile" as="/profile"> My profile </Link>

這就是問題的根源。 通過按下它，它不會觸發組件的重新渲染，也不會更改任何道具。

我可以創造一些額外的東西

onClick=(() => Router.push('profile); reduxActionThatChangesStateOfCurrentProfileId();

但這是一個糟糕的解決方案。 有什么建議么？

Answer 1

問題在於我用於該頁面的包裝器。

什么修好了。

 export default withRouter(
  compose(
    connect(
      mapStateToProps,
      mapDispatchToProps,
    ),
  )(PageComponent));

以前是什么：

 export default
  compose(
    connect(
      mapStateToProps,
      mapDispatchToProps,
    ),
  )withRouter(PageComponent));

Redux 一直在堅持路由器......不讓道具改變，哇。