Question 72888 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Accessing search Params from Layout or Component File in Next.JS 13 – Reactjs

I want to access the search params in a Component or in Layout File to get the lang. There is an way to do that? I Read that is impossible to get the searchparams in Layout File, but there is any other way in Next.JS 13? Or other way to get the lang inside the component?

export default function DashboardLayout({ children }: DashboardProps) {
    return (
        <html>
            <body>
                <div className="w-full h-full flex absolute bg-slate-100">
                    <div className="flex flex-col">
                        <div className="bg-sky-800 w-[20rem] h-12 flex items-center justify-center">
                            <img src="/bigLogo.svg" className="w-28 h-12" title="ProPay" alt="ProPay" />
                        </div>
                        <div className="bg-white h-full shadow-md">
                            <DashboardMenu />
                        </div>
                    </div>
                    <div className="flex flex-col w-full">
                        <div className="bg-sky-700 flex justify-between items-center h-12 pr-5">
                            <p className="ml-5 text-lg text-white">Câmara Municipal de Tondela</p>
                            <SelectLang />
                        </div>
                        <div className="p-3">
                            {children}
                        </div>
                    </div>
                </div>
            </body>
        </html>
    )
};

.

export default function DashboardMenu(){
    const lang: DashboardLangsTypes = getLang("en", "dashboard"); // i want the lang here
    return (
...
Tags:

3

Answers


  1. 0

    you can use router to get the lang as parameter and then pass it down as props to your components

      const router = useRouter();
  const lang = router.query.lang;

    to import it :

    import { useRouter } from "next/router";

    in your case :

    import { useRouter } from "next/router";

export default function DashboardLayout({ children }: DashboardProps) {
  const router = useRouter();
  const lang = router.query.lang;

  return (
    ....
  );
}
    Login or Signup to reply.
  2. 0

    because you are using a Server Component you can replace the usage of next/router with next/navigation

    import { useNavigation } from "next/navigation";

export default function DashboardLayout({ children }: DashboardProps) {
  const navigation = useNavigation();
  const lang = navigation.searchParams.get('lang');

  return (
    ....
  );
}
    Login or Signup to reply.
  3. 0

    Helo, if you gonna use a client side component then you can use useSearchParams Hook available in the version 13..

    Here is the beta documentation link

    'use client';

export default function ExampleClientComponent() {
  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('sort', 'asc'));
        }}
      >
        ASC
      </button>

      {/* using <Link> */}
      <Link
        href={
          // <pathname>?sort=desc
          pathname + '?' + createQueryString('sort', 'desc')
        }
      >
        DESC
      </Link>
    </>
  );
}

    Happy coding

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search