Next.js Discord

Discord Forum

cannot get params next.js v12

Answered
Mallow bee posted this in #help-forum
Open in Discord
Mallow beeOP
It returns an empty object

import { useRouter } from "next/router";
import React from "react";

export default function TestPage() {
  const router = useRouter();
  console.log(router.query);

  return <div>TestPage</div>;
}
Answered by @ts-ignore
add router.isReady as useEffect dependency
View full answer

10 Replies

fuma
It will be empty during prerender if your page isn’t SSR
@ts-ignore
yes
@ts-ignore
add router.isReady as useEffect dependency
Answer
@ts-ignore
then on re render it will be available
@@ts-ignore add `router.isReady` as useEffect dependency
Mallow beeOP
export default function TestPage() {
  const [loading, setLoading] = React.useState(false);
  const [survey, setSurvey] = React.useState({});
  const router = useRouter();
  console.log(router.query.surveyId);

  React.useEffect(() => {
    const getSurvey = async () => {
       console.log(router.query.surveyId);
    };

    getSurvey();
  }, []);

  return (
    <>
      <Navbar />

      <Toaster position="bottom-center" reverseOrder={false} />

      {loading ? (
        <>
          <div className="flex flex-col items-center justify-center h-[70vh]">
            <Spinner size={10} />
          </div>
        </>
      ) : (
        <> {survey?.title} </>
      )}
    </>
  );
}


it worked but nows it just saying router.query.surveyId is undefined
fuma
your dependency list is empty, and also ensure your page is under a dynamic route, or search parameters exist.
Giant panda
Also you need to listen to changes of router.isReady as mentioned before
useEffect(() => {
  // ...
}, [router.isReady])