Question

我有一个网络应用程序，其中包含用户个人资料。现在，用户有了配置文件，URL看起来像：

domain.com/profile?id=123

自我简介看起来像

domain.com/profile

在安装（useEffect []）时，我正在获取适当的用户数据，例如。用于查询用户ID 123的用户数据或已登录用户的个人资料，如果都失败，则重新路由到主页。

现在问题出在我想从

出发时

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坚持使用路由器...不让道具改变，哇！

NextJs使用不同的查询路由到同一页面

1 个答案: