Next.js 14 App Router点击Link后页面未更新问题求助

Next.js 14的App Router里，服务器组件page.tsx通过next/link跳转到同路由仅Query参数变化的地址时，框架默认不会重新执行服务器组件的逻辑——因为路由路径没改，它会判定是同一个页面，所以不会触发服务器端的重新渲染，自然不会打印GET /a?param=x的日志。虽然前端地址栏更新了，但服务器组件的旧数据没更新，页面内容也就不变。而刷新或新标签打开会重新初始化服务器组件，所以能正常加载过滤后的数据。

办法1：客户端组件监听Query变化主动拉数据 #

你的Table.tsx已经是带"use client"的客户端组件，直接用useSearchParams监听Query参数变化，参数变了就重新调API拿数据，不用依赖服务器组件传数据：

// app/a/Table.tsx
'use client';

import { useSearchParams, useEffect, useState } from 'react';
import { Table } from '@mantine/core';

export default function TableComponent() {
  const searchParams = useSearchParams();
  const [tableData, setTableData] = useState([]);

  useEffect(() => {
    const targetParam = searchParams.get('param');
    // 替换成你的实际API地址
    const fetchFilteredData = async () => {
      const res = await fetch(`/api/your-data-api?param=${targetParam || ''}`);
      const data = await res.json();
      setTableData(data);
    };
    fetchFilteredData();
  }, [searchParams]); // 监听searchParams变化，参数变了就重新请求

  // 这里写表格渲染逻辑
  return <Table data={tableData} />;
}

这样每次Query参数改了，客户端组件都会主动拉新数据，表格内容跟着更新。

办法2：服务器组件靠searchParams触发重渲染 #

如果想让服务器组件在Query变化时重新执行，直接在page.tsx里把searchParams作为依赖，同时给fetch加cache: 'no-store'避免缓存旧数据：

// app/a/page.tsx
import { Suspense } from 'react';
import Table from './Table';

export default async function Page({ searchParams }: { searchParams: { param?: string } }) {
  const targetParam = searchParams.param;
  // 替换成你的实际API地址
  const res = await fetch(`https://your-api-domain/data?param=${targetParam || ''}`, {
    cache: 'no-store'
  });
  const tableData = await res.json();

  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Table data={tableData} />
    </Suspense>
  );
}

这样Query参数变化时，服务器组件会重新执行，拉取对应过滤数据传给Table组件。

办法3：手动调用router.refresh()强制刷新 #

在客户端组件的Link点击事件里，手动调router.refresh()触发服务器组件重新渲染：

// app/a/Table.tsx
'use client';

import { useRouter } from 'next/navigation';
import Link from 'next/link';

export default function TableComponent() {
  const router = useRouter();

  const handleFilterClick = (e: React.MouseEvent, paramValue: string) => {
    e.preventDefault();
    router.push(`/a?param=${paramValue}`);
    router.refresh(); // 强制刷新，触发服务器端重新渲染
  };

  return (
    <Link 
      href="/a?param=x" 
      onClick={(e) => handleFilterClick(e, 'x')}
    >
      查看X类数据
    </Link>
  );
}

这种方式会强制触发服务器端的请求，控制台会打印GET /a?param=x，页面也会同步更新。

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