Next.js中查询参数变更时如何实现页面重新渲染？

核心问题分析 #

你遇到的问题本质是useEffect的依赖项未正确配置，导致组件没感知到URL query参数的变化，进而没有重新执行排序逻辑更新页面数据。

具体解决方案 #

1. 给useEffect添加正确的依赖项

将router.query.sort（你用到的具体query参数）加入useEffect的依赖数组，这样当该参数变化时，useEffect会自动重新执行，触发排序并更新状态。

示例代码：

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

const BestSellings = () => {
  const router = useRouter();
  const [lotsInBestSellings, setLotsInBestSellings] = useState([]);
  // 假设这是你的原始热销商品数据
  const rawProducts = [/* 商品数据数组 */];

  useEffect(() => {
    // 处理query初始为undefined的情况
    const sortKey = router.query.sort as string || '0';
    
    // 根据选中的排序条件处理数据
    const sortedList = [...rawProducts];
    switch (sortKey) {
      case '1':
        sortedList.sort((a, b) => b.price - a.price);
        break;
      case '2':
        sortedList.sort((a, b) => a.price - b.price);
        break;
      default:
        // 默认按销量排序
        sortedList.sort((a, b) => b.salesVolume - a.salesVolume);
    }

    setLotsInBestSellings(sortedList);
  }, [router.query.sort, rawProducts]); // 关键：添加router.query.sort作为依赖

  const changeSelectBox = (e: React.ChangeEvent<HTMLSelectElement>) => {
    router.push(
      {
        pathname: '/bestSellings',
        query: { sort: e.target.value }
      },
      undefined,
      { shallow: true } // 启用浅路由，避免全页刷新
    );
  };

  return (
    <div>
      <select onChange={changeSelectBox} defaultValue={router.query.sort || '0'}>
        <option value="0">默认热销排序</option>
        <option value="1">价格从高到低</option>
        <option value="2">价格从低到高</option>
      </select>
      
      {/* 渲染排序后的商品列表 */}
      {lotsInBestSellings.map(product => (
        <div key={product.id} className="product-item">
          <h3>{product.name}</h3>
          <p>¥{product.price}</p>
        </div>
      ))}
    </div>
  );
};

export default BestSellings;

2. 启用浅路由（Shallow Routing）

在router.push时传入{ shallow: true }参数，这会让Next.js只更新客户端的路由状态，不会触发服务器端的渲染逻辑（刚好满足你不想用getStaticProps或getServerSideProps的需求），同时保证router.query能正确更新。

3. 处理query的初始值

页面刚加载时router.query可能为undefined，所以在useEffect里要先做兜底处理，避免出现排序逻辑报错的情况。

额外注意事项 #

• 不要直接依赖整个router.query对象作为useEffect的依赖，因为它是引用类型，浅比较可能无法检测到内部属性的变化，直接依赖具体的参数（如router.query.sort）更可靠。
• 如果你的原始商品数据是从其他状态或钩子获取的，也要把它加入依赖数组，确保数据变化时也能重新排序。

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