NextJS实现点击按钮切换调用带不同查询参数的外部REST API

当然可以实现这个需求！我帮你调整一下代码，让按钮点击后能切换不同的查询参数，同时利用SWR自动更新数据，完美适配你的场景~

核心思路 #

1. 按钮不能用href属性，改用onClick事件配合useRouter的push方法更新URL查询参数
2. 让SWR的请求Key动态依赖当前的查询参数，这样参数变化时SWR会自动重新发起请求

修改后的完整代码 #

import axios from '@/lib/axios'
import useSWR from "swr"
import { useRouter } from 'next/router'

const Jobs = () => {
  const router = useRouter()
  const { filter } = router.query // 直接解构出当前的filter参数

  // 动态生成SWR的请求Key和请求函数
  const { data: jobsData, error, isLoading } = useSWR(
    // 有filter参数时拼接查询字符串，否则请求基础的/jobs接口
    filter ? `/jobs?filter=${filter}` : '/jobs',
    (url) => axios.get(url).then(res => res.data.data)
  )

  // 处理按钮点击，更新URL中的查询参数
  const handleFilterChange = (filterValue) => {
    router.push({
      pathname: '/jobs',
      query: filterValue ? { filter: filterValue } : {} // 传空值可清空filter参数
    })
  }

  // 加载状态与错误处理
  if (isLoading) return <div>正在加载职位数据...</div>
  if (error) return <div>加载失败：{error.message}</div>

  return (
    <>
      {/* 给当前选中的按钮加active类，提升用户体验 */}
      <button 
        onClick={() => handleFilterChange('completed')}
        className={filter === 'completed' ? 'active' : ''}
      >
        Completed
      </button>
      <button 
        onClick={() => handleFilterChange('upcoming')}
        className={filter === 'upcoming' ? 'active' : ''}
      >
        Upcoming
      </button>
      <button 
        onClick={() => handleFilterChange('cancelled')}
        className={filter === 'cancelled' ? 'active' : ''}
      >
        Cancelled
      </button>
      {/* 可选：添加"全部职位"按钮，清空filter参数 */}
      <button 
        onClick={() => handleFilterChange('')}
        className={!filter ? 'active' : ''}
      >
        全部职位
      </button>

      {/* 渲染职位列表 */}
      <div className="jobs-container">
        {jobsData?.map(job => (
          <div key={job.id} className="job-card">
            <h3>{job.title}</h3>
            <p>状态：{job.status}</p>
          </div>
        ))}
      </div>
    </>
  )
}

export default Jobs

关键细节说明 #

• URL参数更新：用router.push传递query对象，既会优雅更新URL，也会触发组件重新渲染
• SWR自动刷新：SWR会监听请求Key的变化，一旦filter参数改变，就会自动重新请求对应接口，无需手动调用刷新
• 用户状态反馈：加上isLoading和error状态处理，让用户清晰知道数据加载情况
• 选中状态标识：通过className判断当前选中的filter，给按钮添加样式，方便用户识别当前筛选状态

这样调整后，你的页面就能完美实现点击按钮切换不同API端点的需求啦！

备注：内容来源于stack exchange，提问作者BigJobbies