Next.js：如何不刷新页面重载当前API或路由？

你之前用router.push(router.pathname)没效果，是因为Next.js会识别路径未变化，不会触发数据重载或页面更新。以下分两种路由结构给出可行方案：

Pages Router（pages目录） #

• 添加随机Query参数触发路由更新
  通过给当前路径附加随机Query参数，让Next.js认为是新路由，从而重新执行getServerSideProps/getInitialProps获取最新数据，且不会整页刷新：

  import { useRouter } from 'next/router'
  
  const refreshData = () => {
    const router = useRouter()
    router.replace({
      pathname: router.pathname,
      query: { ...router.query, refresh: Date.now() }
    })
  }
  

• 直接重新发起API请求
  若在客户端组件中，可直接调用API请求并更新本地状态，无需路由操作：

  import { useState, useEffect } from 'react'
  
  const MyComponent = () => {
    const [data, setData] = useState(null)
  
    const fetchData = async () => {
      const res = await fetch(`/api/your-endpoint`)
      const newData = await res.json()
      setData(newData)
    }
  
    useEffect(() => {
      fetchData()
    }, [])
  
    return (
      <div>
        <button onClick={fetchData}>重载数据</button>
        {/* 渲染数据内容 */}
      </div>
    )
  }
  

App Router（app目录） #

• 用revalidatePath+router.refresh()强制刷新
  调用revalidatePath清除当前路径的缓存，再用router.refresh()触发组件重新渲染并获取最新数据，无整页刷新：

  'use client'
  import { useRouter } from 'next/navigation'
  import { revalidatePath } from 'next/cache'
  
  const refreshData = () => {
    const router = useRouter()
    revalidatePath(router.currentPath)
    router.refresh()
  }
  

• 借助数据获取库（如SWR）重新获取
  若使用SWR这类库，直接调用mutate方法即可重新拉取数据并更新UI：

  'use client'
  import useSWR from 'swr'
  
  const fetcher = (url) => fetch(url).then(res => res.json())
  
  const MyComponent = () => {
    const { data, mutate } = useSWR('/api/your-endpoint', fetcher)
  
    return (
      <div>
        <button onClick={() => mutate()}>重载数据</button>
        {/* 渲染数据内容 */}
      </div>
    )
  }
  

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