Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Router query do not contain query string parameter on Router.push() #11141

Closed
armandabric opened this issue Mar 17, 2020 · 5 comments
Closed

Comments

@armandabric
Copy link
Contributor

Bug report

Describe the bug

I'm using the router.push method to change the page after a form submission:

const router = useRouter();

// Then later in one event handler:
router.push(
    "/hotel/[websiteSeoSlug]/rooms",
    /hotel/paris-nation/rooms?checkIn=2020-03-17&checkOut=2020-03-18&nbAdult=2&nbChild=2,
);

On the destination page I use again the router to extract the router query with the help of a hook:

const useFoo = (): Foo => {
  const router = useRouter();

  const foo = useMemo(() => {
    return Foo.fromQueryString(router.query); // Sometime router.query only contain the router dynamic part and not the querystring, and some other time it contain both
  }, [
    ...router.query
  ]);

  return foo;
};

When I arrive on the page after a change on page on client side (router.push(...)), the router.query only contains the dynamic url part { websiteSeoSlug: "paris-nation" }.

If I refresh the page the router.query contains the dynamic url part AND the querystring parameter: { websiteSeoSlug: "paris-nation", checkIn: "2020-03-17", checkOut: "2020-03-18", nbAdult: "2", nbChild: "2" }.

Expected behavior

The router object return by useRouter should always contain the query string parameter of the current URL.

System information

  • Version of Next.js: v9.3.0
@wong2
Copy link

wong2 commented Mar 18, 2020

same here

@majelbstoat
Copy link

majelbstoat commented Mar 19, 2020

Pretty sure this is described here: #9473 (comment)

You need the query string in the href as well as the asPath. Try:

router.push(
    "/hotel/[websiteSeoSlug]/rooms?checkIn=2020-03-17&checkOut=2020-03-18&nbAdult=2&nbChild=2",
    "/hotel/paris-nation/rooms?checkIn=2020-03-17&checkOut=2020-03-18&nbAdult=2&nbChild=2",
);

@armandabric
Copy link
Contributor Author

Ho yes! Adding the querystring on both path solve the issue

@armandabric
Copy link
Contributor Author

I will close this issue as it's a duplicate of #9473

Thanks for your help @majelbstoat

@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants