NextJs 路由到具有不同查询的同一页面

Question

I have a web app, which has user profiles. Now a user has a profile, and the url would look something like:

domain.com/profile?id=123

while self-profile looks like

domain.com/profile

On mount (useEffect[]) I am fetching appropriate user data, eg. user data for query of user id 123 OR logged in user's profile, if both fail then reroute to main page.

Now the problem comes when I want to go from

domain.com/profile?id=123

to

domain.com/profile

Or any other profile with an ID.

I can have solved the issue when a user is using browser's back (?id=123) and forward (?id=124) buttons to these routers:

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

However, the issue. Profile page has a NextJs's

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

And that is causing the problem. By pressing on it, it does NOT trigger rerender of the component, or get any props changed.

I can create something extra like

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

but that's a bad fix. Any suggestions?

Answer 1

Issue was with the wrapper I used for that page.

What fixed it.

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

What was before:

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

Redux was persisting the router... Not letting the props change, WOW.