Next.js中无法获取URL查询参数？搜索结果页接收值问题求助

1. 修复

return (<SearchResult />)

组件的查询参数获取逻辑 #

URL中?后的查询参数，需要用useSearchParams钩子获取，useParams仅用于动态路由参数（如/user/[id]里的id），两者用途不同。

修改后的

return (<SearchResult />)

'use client'
import { useSearchParams } from "next/navigation"

const SearchResult = () => {
  const searchParams = useSearchParams()
  // 从搜索参数中提取query值
  const searchQuery = searchParams.get('query')

  console.log(searchQuery) // 现在可正常打印查询参数

  return (
    <div>
      Hello.. 搜索关键词：{searchQuery}
    </div>
  )
}

export default SearchResult

关键调整：

• 导入useSearchParams替代无用的useRouter
• 通过searchParams.get('query')读取URL查询参数
• 移除无关的params props和错误的useParams调用

2. 清理

return (<Navbar />)

组件冗余代码 #

handleSearch中的setSearchQuery(searchQuery)完全冗余，输入框的onChange已经实时更新了状态，直接删除该行：

const handleSearch = async (e: React.FormEvent) => {
  e.preventDefault()
  // 删除此行：setSearchQuery(searchQuery)
  router.push(`/searchresults?query=${searchQuery}`)
}

3. 确认路由路径一致性 #

检查Navbar跳转路径与SearchResult页面文件路径是否匹配：

• 若SearchResult页面文件是app/searchresult/page.tsx，需将Navbar中的router.push改为/searchresult?query=${searchQuery}
• 若文件是app/searchresults/page.tsx，则保持现有路径，确保URL显示的路径与文件路由一致

内容的提问来源于stack exchange，提问作者Gaurav Tamang