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 一直在坚持路由器......不让道具改变，哇。