javascript - How to change and add query strings in the app folder of Next.js? - Stack Overflow

admin管理员组

文章数量:1395248

With the router in pages folder, I update the url like below:

router.push({
   query: {
      ...router.query,
      page: newPage + 1
   }
})

How I can change the query parameters in the app directory? I use Next.js 13.4.

With the router in pages folder, I update the url like below:

router.push({
   query: {
      ...router.query,
      page: newPage + 1
   }
})

How I can change the query parameters in the app directory? I use Next.js 13.4.

• javascript
• reactjs
• next.js

Share Improve this question Follow edited May 13, 2023 at 14:04 Youssouf Oumar 46.6k1616 gold badges103103 silver badges105105 bronze badges asked May 13, 2023 at 12:40 Ramin eghbalianRamin eghbalian 2,67511 gold badge2121 silver badges3838 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

In the app folder, router.push(href: string) accepts as a parameter only the href as a string. You need to set query parameters yourself, as they show in this example.

You set it this way:

"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";

export default function ExampleClientComponent() {
  const router = useRouter();

  const createQueryString = (name, value) => {
    const params = new URLSearchParams();
    params.set(name, value);

    return params.toString();
  };

  return (
    <>
      {/* using useRouter */}
      <button
        onClick={() => {
          router.push("/posts" + "?" + createQueryString("sort", "asc"));
        }}
      >
        ASC
      </button>

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

You would read it with the searchParams passed to your page ponent:

// app/posts/page.js

export default function Page({ searchParams }) {
  return <div>{searchParams.sort}</div>;
}

Or using the useSearchParams function in any client ponent:

"use client";

import { useSearchParams } from "next/navigation";

export default function Page() {
  const searchParams = useSearchParams();
  return <div>{searchParams.get("sort")}</div>;
}

I wrote a function for using query strings

export const createQueryString = (pathname, router, name: string, value: string) => {
   let searchParams = new URLSearchParams(window.location.search)
   if (value) {
      if (!Array.isArray(value)) {
         if (!searchParams.has(name)) searchParams.append(name, value)
         else searchParams.set(name, value)
      } else {
         if (!searchParams.has(name)) searchParams.append(name, value.join())
         else searchParams.set(name, value.join())
      }
   } else if (searchParams.has(name)) searchParams.delete(name)
   const newUrl = pathname + '?' + searchParams.toString()
   router.push(newUrl)
}

and in my ponent, I called it. pass pathname and router from 'next/navigation' to createQueryString function

import { createQueryString } from 'helpers'
import { usePathname, useRouter } from 'next/navigation'

const TablePagination = ({ pagination }: Props) => {
   const router = useRouter()
   const pathname = usePathname()
   return (
      <Pagination
         count={50}
         rowsPerPage={10}
         page={pagination.page - 1}
         onPageChange={(event, page) => createQueryString(pathname, router, 'page', `${page + 1}`)}
         onRowsPerPageChange={(event) =>
            createQueryString(pathname, router, 'take', event.target.value)
         }
      />
   )
}

this helper function handle multipe queries at once:

 const createQueryString = useCallback(
(query)=> {
  const params = new URLSearchParams(searchParams);
  for(const [name, value] of Object.entries(query)){
    if(name !== null && value !== undefined) {
      params.set(name, value);
    }
  }
 
 return params.toString();
}, [searchParams]

);

and use it in client ponent like this:

 const query = {
  category: 'cars',
  section: 'vehicles',
};

router.push(`/?${createQueryString(query)}`);

just make sure that router is imported from 'next-navigation' or 'next-intl/client'

本文标签： javascriptHow to change and add query strings in the app folder of NextjsStack Overflow