NextJS中搜索路由跳转后页面未重新渲染问题咨询

问题原因 #

Next.js通过Link组件做客户端路由跳转时，动态路由页面（比如/search/[searchId].js）会被复用，组件不会重新初始化，也不会自动触发数据更新逻辑，导致新的搜索参数无法同步到页面内容中。

解决方案 #

1. 在搜索页面监听路由参数变化

在/search/[searchId].js里，用useRouter钩子监听searchId参数的变化，参数更新时重新获取搜索数据：

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

export default function SearchPage() {
  const router = useRouter()
  const [searchResult, setSearchResult] = useState(null)
  const { searchId } = router.query

  // 监听searchId变化，重新请求数据
  useEffect(() => {
    if (!searchId) return

    async function fetchSearchData() {
      // 替换为你的实际搜索接口
      const res = await fetch(`/api/search/${searchId}`)
      const data = await res.json()
      setSearchResult(data)
    }

    fetchSearchData()
  }, [searchId])

  if (!searchId) return <div>加载中...</div>

  return (
    <div>
      <h1>搜索关键词：{searchId}</h1>
      {searchResult && <div>{JSON.stringify(searchResult)}</div>}
    </div>
  )
}

2. 使用getServerSideProps确保每次跳转都获取最新数据

如果搜索数据需要服务端渲染，直接在页面中配置getServerSideProps，它会在每次客户端跳转时重新执行，保证数据和路由参数同步：

import { useRouter } from 'next/router'

export default function SearchPage({ searchResult }) {
  const { searchId } = useRouter().query

  if (!searchId) return <div>加载中...</div>

  return (
    <div>
      <h1>搜索关键词：{searchId}</h1>
      {searchResult && <div>{JSON.stringify(searchResult)}</div>}
    </div>
  )
}

export async function getServerSideProps(context) {
  const { searchId } = context.params
  // 替换为你的实际搜索接口
  const res = await fetch(`https://your-api-domain.com/search/${searchId}`)
  const searchResult = await res.json()

  return { props: { searchResult } }
}

3. 优化搜索栏的跳转逻辑

确保搜索输入值正确绑定状态，同时避免表单默认提交行为干扰客户端路由：

import { useState } from 'react'
import { useRouter } from 'next/router'

export default function SearchBar() {
  const [search, setSearch] = useState('')
  const router = useRouter()

  const handleSearch = () => {
    if (search.trim()) {
      router.push(`/search/${search}`)
    }
  }

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="输入搜索内容"
      />
      <button 
        type="button"
        className="btn-cta btn-3"
        onClick={handleSearch}
      >
        SEARCH
      </button>
    </div>
  )
}

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