#Router
buoyant rover
deep parcel
ah great
I was creating it now !
svred said that
and I added it like you can see in the code above. does it make sense?
@tame hull ?
tame hull
The pathname string has been removed and is replaced by usePathname()
The query object has been removed and is replaced by useSearchParams()
You cannot use that method here.
deep parcel
hmm
tame hull
Here is an example of mine:
const onItemClick = (ship: ShipSearchDataProps) => {
router.push(`/ship/${ship.shipid}`);
};
this will push the Client to myWebsite.com/ship/12345 where 12345 is shipid.-
deep parcel
const searchString = '/search';
const query = {
location: searchInput,
startDate: startDate.toISOString(),
endDate: endDate.toISOString(),
noOfGuests,
};
router.push({
pathname: searchString,
query: query,
});
};
My shipPage looks like this:
export default async function Page({params}: { params: { shipid: number } }) {
const {shipid} = params
const searchParams = useSearchParams(); where should I use this?
tame hull
Or in your case:
import { useSearchParams } from 'next/navigation';
export default function SearchBar() {
const searchParams = useSearchParams();
const search = searchParams.get('location');
get('startdate') etc.
deep parcel
do you know what Im trying to achieve?
tame hull
You are tring to push the user to a result page with the parameters in your query I guess.
deep parcel
I will explain you better ... im really confused now :SSSS
I have this page
when Im searching for a "location" with "number of guess" and "start date" and "endDate" .. I want it to save that info, to be used in /search page
so.. when I get here.. "location" and "?" should be replaced by what I searched for
"use client"
import { useRouter } from "next/navigation"
import Footer from "../../../components/Footer"
import Header from "../../../components/Header"
function page () {
const router = useRouter();
const {location, startDate, endDate} = router.query
console.log(router.query)
return (
<div>
<Header/>
<main className="flex">
<section className="flex-grow pt-14 px-6 ">
<p className="text-xs "> 300+ Stays for "?" number of Guests</p>
<h1 className="text-3xl font-semibold mt-2 mb-6"> Stays in "LOCATION" </h1>
<div className="hidden lg:inline-flex mb-5 space-x-3 text-gray-800 whitespace-nowrap">
<p className="button">Cancellation Flexibity</p>
<p className="button">Type of Place</p>
<p className="button">Price</p>
<p className="button">Rooms and Beds</p>
<p className="button">More Filters</p>
</div>
</section>
</main>
<Footer/>
</div>
)
}
export default page```can you help me debugging this? :S
tame hull
You just quote "location" and "?" - you don't pass any values to them.
You need ${value}
tame hull
You need to push the client to website.com/search?location=${location}&startdate=${startdate} etc.
deep parcel
deep parcel
You need to push the client to website.com/search?location=${location}&startdate...
where? in "Search" page or "header" (where search input is) ?
tame hull
On whatever handles your click on the search button. Set the variables as the user selects them, and then push the router.
I have to leave - hope you figure it out.
deep parcel
on line 132 right ?
