How can I use query string in next js?

Question

If i go to my site www.example.com/page?my-string, I check for the string but can't do anything with it.

import { useRouter } from "next/router";

export default function Index() {

  const router = useRouter();

  let str = null;

  "my-string" in router.query ? (str = true) : (str = false);

  const [myState, setMyState] = useState(str);

  console.log(str) /* this logs false twice and then true once */
  console.log(myState) /* this logs false three times */

  return (
    <>
      <GlobalState.Provider value={[myState, setMyState]}>
         <Page />
      </GlobalState.Provider>
    </>
  );
}

I'm trying to pass this state in GlobalState, it always passes false. I played around with useEffect, but I can't figure it out.

Nick Vu · Accepted Answer · 2022-07-05 13:12:13Z

1

useState only assigns the default value once in the first rendering. In subsequent renderings, you need to listen to route.query change with useEffect for state update.

import { useRouter } from "next/router";

export default function Index() {

  const router = useRouter();
  const [myState, setMyState] = useState("my-string" in router.query);

  useEffect(() => {
     setMyState("my-string" in router.query);
  }, [router.query]);

  return (
    <>
      <GlobalState.Provider value={[myState, setMyState]}>
         <Page />
      </GlobalState.Provider>
    </>
  );
}

answered Jul 5, 2022 at 13:12

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I use query string in next js?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related