As the error states, the issue is that the component needed to be wrapped with the SUSPENSE boundary separately. The rest of the code now had to have its own function.
‘use client’;
import React, { Suspense } from ‘react’;
import Search from ‘@/components/Search’;
import { useSearchParams } from ‘next/navigation’;
function SearchPage() {
return (
<Suspense fallback={
Loading…
}>
);
}
const SearchContent = () => {
const searchParams = useSearchParams(); // Get search parameters from the URL
const location = searchParams.get(“location”) || “”; // Extract the location parameter
const type = searchParams.get(‘type’) || “”; // Get the type (rent/sale)
const propertyType = searchParams.get(‘propertyType’) || “”; // Get the specific property type
return (
);
};
export default SearchPage;