React-Router-Dom跳转异常：URL变更但商品组件未渲染

核心问题 #

从商品页跳转至另一商品页时URL更新但组件未渲染，本质是React Router在路由参数变化时不会重新挂载组件，仅更新组件props。如果你的Product组件只在首次挂载时执行数据获取或初始化逻辑，参数变化后不会触发更新，导致UI未刷新。

解决步骤 #

1. 修正组件命名（必要前提） #

React组件名必须以大写字母开头，否则会被解析为原生HTML标签。你的路由代码中<category>和<product>需改为<Category>和<Product>：

<BrowserRouter>
  <Routes>
    <Route path="/home/categories">
      <Route path=":category" element={<Category />}>
        <Route path=":product" element={<Product />}></Route>
      </Route>
    </Route>
  </Routes>
</BrowserRouter>

2. 监听路由参数变化，触发组件更新 #

在Product组件中，使用useParams获取路由参数，并将参数作为useEffect的依赖项，确保参数变化时重新执行数据获取或状态更新逻辑：

import { useParams, useEffect, useState } from 'react';

function Product() {
  // 获取路由参数
  const { category, product } = useParams();
  const [productInfo, setProductInfo] = useState(null);

  // 参数变化时重新请求数据
  useEffect(() => {
    const loadProductData = async () => {
      // 替换为你的实际数据请求逻辑
      const response = await fetch(`/api/categories/${category}/products/${product}`);
      const data = await response.json();
      setProductInfo(data);
    };

    loadProductData();
  }, [category, product]); // 依赖路由参数，参数变化时触发

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

  return (
    <div className="product-detail">
      <h2>{productInfo.name}</h2>
      <p>{productInfo.description}</p>
      {/* 其他商品详情内容 */}
    </div>
  );
}

export default Product;

3. 修正搜索栏导航的语法错误 #

你的NavLink代码存在语法错误，to属性缺少等号，需修正为：

<NavLink to={`/home/categories/${product.category}/${product.id}`}>
  {product.name}
</NavLink>

额外排查点 #

• 检查是否存在全局状态缓存未更新的情况，比如使用Redux或Context存储商品数据时，需在参数变化时同步更新状态。
• 若使用了React.memo包裹Product组件，需确保props（包括路由参数）变化时能正确触发重渲染。

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