CODEWITHSUNDEEP
typescriptnext.jsreact-server-components
Igor Ostapenko
Igor Ostapenko

Reputation: 21

How to fix the Error: Route used `searchParams.priceTo`. `searchParams` should be awaited before using its properties

I have the same problem. Next.JS I'm trying to get get parameters via an async request. but the console always displays this error

Already exhausted everything AI Chat no one can give Maybe you have had this and can help with this?

enter image description here

interface SearchParams {
  place?: string;
  season?: string;
  priceFrom?: string;
  priceTo?: string;
  type?: string;
  rooms?: string;
  services?: string;
  categoryRooms?: string;
  sort?: string;
}

interface FindProps {
  searchParams: SearchParams;
}


export default async function Find({ searchParams }: FindProps) {

  const place = searchParams.place ?? '';
  const season = searchParams.season ?? '';
  const priceFrom = searchParams.priceFrom ?? '';
  const priceTo = searchParams.priceTo ?? '';
  const type = searchParams.type ?? '';
  const services = searchParams.services ?? '';
  const rooms = searchParams.rooms ?? '';
  const categoryRooms = searchParams.categoryRooms ?? ''; 
  const sort = searchParams.sort ?? '';


  return (
    <div>
    </div>
  );
}

Upvotes: -3

Views: 233

Answers (1)

Emeka Elo
Emeka Elo

Reputation: 541

In Next 15, these dynamic APIs(params and searchParams as well as cookies(), draftMode(), and headers() from next/headers) have been made asynchronous.

Access the properties this way

// For client components
const { id } = React.use(params)

// For server components
const { id } = await params

So in your case,
const { place, season, priceFrom } = await searchParams

Upvotes: 1

Related Questions