NextJS中如何为URL添加查询参数？解决循环及参数丢失问题

无限循环的核心原因是**useEffect监听router.query变化，而router.replace又会修改router.query，形成触发闭环**：

1. 按下回车调用handleSearch → 执行router.replace更新URL参数
2. router.query变化触发useEffect → 再次调用handleSearch
3. handleSearch又执行router.replace → 循环往复

具体修复步骤 #

1. 给输入框绑定状态，避免值与状态脱节

原来的输入框未绑定value，会导致显示内容与React状态不一致，先补上双向绑定逻辑：

<input 
  type="text" 
  onKeyDown={handleSearchKeydown} 
  value={searchTerm}
  onChange={(e) => setSearchTerm(e.target.value)} // 同步输入框值到状态
/>

2. 修改handleSearch，避免重复更新URL

在handleSearch中添加判断：只有当URL中的searchTerm与当前要设置的参数不一致时，才执行router.replace，打断循环链条：

const handleSearch = async (searchTerm: string) => {
  setSearchTerm(searchTerm)
  // 仅当URL参数与当前搜索词不同时，才更新URL
  if ((router.query.searchTerm as string) !== searchTerm) {
    router.replace(
      { query: { ...router.query, searchTerm } },
      undefined,
      { shallow: true } // 仅更新URL，不重新加载页面组件
    )
  }
  const searchResult = await getSearchResult(searchTerm, locale)
}

这里的shallow: true是关键：它让Next.js只更新URL而不触发页面组件的重新加载，减少不必要的渲染，同时避免触发额外的生命周期钩子。

3. 优化useEffect逻辑，避免重复触发搜索

useEffect的作用是当URL中存在searchTerm时，同步到状态并执行搜索。此时不需要再调用handleSearch（避免触发URL更新），直接单独处理更清晰：

useEffect(() => {
  const urlSearchTerm = router.query.searchTerm as string
  if (urlSearchTerm && urlSearchTerm !== searchTerm) {
    setSearchTerm(urlSearchTerm)
    getSearchResult(urlSearchTerm, locale) // 直接执行搜索，跳过URL更新逻辑
  }
}, [router.query, locale, searchTerm])

完整修复后的代码 #

import { useRouter } from 'next/router'
import { useEffect, useState, KeyboardEvent } from 'react'

export const SearchPage = ({ locale }: { locale: string }) => {
    const router = useRouter()
    const [searchTerm, setSearchTerm] = useState('')

    useEffect(() => {
        const urlSearchTerm = router.query.searchTerm as string
        if (urlSearchTerm && urlSearchTerm !== searchTerm) {
            setSearchTerm(urlSearchTerm)
            getSearchResult(urlSearchTerm, locale)
        }
    }, [router.query, locale, searchTerm])

    const handleSearch = async (searchTerm: string) => {
        setSearchTerm(searchTerm)
        if ((router.query.searchTerm as string) !== searchTerm) {
            router.replace(
                { query: { ...router.query, searchTerm } },
                undefined,
                { shallow: true }
            )
        }
        const searchResult = await getSearchResult(searchTerm, locale)
    }

    const handleSearchKeydown = async (
        event: KeyboardEvent<HTMLInputElement>
    ) => {
        if (
            event.key === 'Enter' &&
            searchTerm.trim() !== '' &&
            searchTerm.length >= 3
        ) {
            await handleSearch(searchTerm) // 直接使用state中的搜索词，无需依赖event.target.value
        }
    }

    return (
        <div id="wrapper">
            <input 
                type="text" 
                onKeyDown={handleSearchKeydown} 
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
            />
        </div>
    )
}

关键说明 #

• 状态与输入框绑定：确保输入框显示内容和React状态完全同步，避免出现值不一致的问题。
• 条件化更新URL：从根源上打断router.replace→router.query变化→useEffect触发的循环链条。
• shallow: true：最小化路由更新的影响，仅修改URL而不重新加载页面，提升性能同时避免额外渲染。

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