I am facing an issue with two components in Next.js. Let's call them <Navbar /> and <SearchResult />.
The <Navbar /> includes a search bar where users can search for items, and a Search button. When the user clicks on the Search button, they are supposed to be redirected to the <SearchResult /> page where the results should be displayed. I am able to send the searched query from the <Navbar /> component but I am struggling to capture it in the <SearchResult /> component.
//Even though I can see the query in the URL bar (
localhost:3000/searchresult?query=somequeryBelow is the code snippet for my <Navbar />:
'use client'
import { useRouter } from "next/navigation";
import { useState } from "react";
const NavBar = () => {
const router = useRouter()
const [searchQuery, setSearchQuery] = useState('')
const handleSearch = async (e: React.FormEvent) => {
e.preventDefault()
setSearchQuery(searchQuery)
//redirect the user to searchresults page
router.push(`/searchresults?query=${searchQuery}`)
}
return (<Navbar className="bg-transparent">
<NavbarItem className="bg-white rounded-md" >
<input
type="text"
className="outline-none text-black p-2 text-small rounded-l-md"
placeholder="Search for a Character"
value={searchQuery}
onChange={(e)=> setSearchQuery(e.target.value)}/>
<button
className="text-black px-2 hover:text-emerald-400 transition-colors"
type="submit"
onClick={handleSearch}>Search</button>
</NavbarItem>
</NavbarContent>
</Navbar>)
}
export default NavBar
And this is the code for my <SearchResult /> component:
'use client'
import { useRouter } from "next/navigation"
const page = ({params} : {params: any}) => {
const router = useRouter()
const { searchQuery } = useParams()
console.log(searchQuery)
return (
<div>
Hello..
</div>
)
}
export default page
I have tried various solutions but haven't been able to resolve this issue. Any assistance would be greatly appreciated!