React Router切换产品路由后页面不重新渲染问题求助

当在同一路由组件（如ProductPage）间切换路由参数时，React Router会复用现有组件实例而非重新挂载。你的useEffect依赖数组为空，仅在组件首次挂载时执行一次，后续路由参数id变化时不会重新触发产品数据获取，导致页面内容未更新。

修改ProductPage中的useEffect，将params.id加入依赖数组，确保路由参数变化时重新获取对应产品：

useEffect(() => {
  const _product = getProdByID(params.id);

  if (_product) {
    setProduct(_product);
  } else {
    // 请确保errorObj已定义，示例如下
    const errorObj = { name: "产品不存在" };
    setProduct(errorObj);
    navigate("/shop");
  }
}, [params.id, navigate]); // 依赖params.id，参数变化时重新执行

• 若之前尝试监听params.id无效，大概率是依赖数组未配置完整（比如遗漏navigate或存在闭包问题）。navigate是useNavigate返回的稳定引用，加入依赖不会引发额外渲染。
• 无论使用navigate函数还是Link组件跳转，核心都是触发路由参数变化，修复useEffect后两种方式都会正常生效。
• 代码中errorObj未定义，需在组件内补充声明，避免运行时报错。

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