react-router-dom的<Link>组件同页面点击时不刷新页面问题

这是React Router的默认行为：当跳转到同一组件的不同参数路由时，组件会被复用，不会重新执行初始化逻辑，导致数据未更新、页面不刷新。下面是几种可行的解决方法：

方法一：在详情页监听路由参数变化，重新请求数据 #

在商品详情页组件中，通过useParams获取当前商品ID，再用useEffect监听ID变化，触发数据重新获取：

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function ProductDetail() {
  const { id } = useParams();
  const [product, setProduct] = useState(null);

  useEffect(() => {
    // 调用接口获取对应ID的商品数据
    fetch(`${API}/products/${id}`)
      .then(res => res.json())
      .then(data => setProduct(data));
  }, [id]); // 依赖ID变化，自动重新执行请求

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

  return (
    <div>
      <h1>{product.title}</h1>
      {/* 其他商品详情内容 */}
    </div>
  );
}

方法二：给Link添加唯一Key，强制组件重建 #

如果不想修改详情页逻辑，可以在搜索结果的Link组件上绑定与商品ID关联的key，让React识别为新元素，从而重新挂载组件：

<Link
  key={`product-${item.id}`}
  to={`/product/${item.id}`}
  onClick={() => handleSearchSubmit()}
>
  {item.title}
</Link>

注意：这种方法会强制销毁重建组件，存在一定性能损耗，仅作为临时替代方案。

方法三：改造自定义Hook，支持依赖更新 #

如果你使用的useGetDataFromApi自定义Hook支持监听依赖变化，可以在详情页将商品ID作为依赖传入，触发重新请求：

import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams();
  // 将id作为依赖传入Hook，监听变化重新请求
  const data = useGetDataFromApi(`${API}/products/${id}`, [id]);

  if (!data.loaded) return <div>加载中...</div>;

  return <div>{data.product.title}</div>;
}

前提是你的useGetDataFromApi内部实现了监听依赖数组变化的逻辑（比如在useEffect中传入依赖参数）。

优先推荐方法一，这是React Router处理路由参数变化的标准方案，逻辑清晰且性能友好。

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