Router don't want to route !

[sonic briar]

In a client component..
I'm on the path /?login=true
How can i navigate to /?login=false ?
router.push('/?login=false') not working.. may it's because searchParams are changing.. but the path isnt..

[spiral radish]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[sonic briar]

https://stackoverflow.com/questions/76538554/nextjs-13-app-router-userouter-function-has-no-effect

:/

[tiny olive]

there's an example in the docs which i slightly modified

here's what you need to do

import { useCallback } from "react";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";

export default function Example() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams()!;

  // Get a new searchParams string by merging the current
  // searchParams with a provided key/value pair
  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams);
      params.set(name, value);

      return params.toString();
    },
    [searchParams]
  );

  return (
    <>
      <p>Sort By</p>

      {/* using useRouter */}
      <button
        onClick={() => {
          // <pathname>?sort=asc
          router.push(pathname + "?" + createQueryString("login", "true"));
        }}
      >
        Login true
      </button>

      {/* using <Link> */}
      <Link
        href={
          // <pathname>?sort=desc
          pathname + "?" + createQueryString("login", "false")
        }
      >
        Login false
      </Link>
    </>
  );
}

[sonic briar]

still the same ? you're sure it's shoulds work :/?

[sonic briar]

https://codesandbox.io/p/sandbox/fervent-minsky-fklfmj?file=%2Fstyles%2FLoginForm.module.css%3A19%2C1

not-working example 😬

[tiny olive]

where are you changing to ?login=false?

[sonic briar]

in the header component

but it's a simple router.push("/number");

look the file ./components/Header.jsx

[tiny olive]

i can see it on the onclose. but how do you close?

[sonic briar]

by clicking outside of the modal sry

[tiny olive]

nothing happens when i click outside

[sonic briar]

lol no way that's the pb

u get console log

the router.push isnt working

[tiny olive]

https://codesandbox.io/p/sandbox/elegant-wozniak-3xwfxn?file=%2Fcomponents%2FHeader.jsx%3A4%2C1

[sonic briar]

wtf

wtf did u change

[tiny olive]

literally used the code i sent above

then i removed the Modal from inside the Link.

you should render the Modal apart else the onClose won't work

i mean the router.push

[sonic briar]

Ahhh..

[spiral radish]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1121451140320608256 message)