如何让React组件仅在带动态ID的商品页面显示？

先修正原代码的两个核心问题 #

1. Hook调用违规：useLocation 必须在组件顶层作用域调用，不能放在嵌套函数内，否则会触发React Hook规则报错。
2. 路径匹配逻辑局限：严格相等判断无法适配带动态ID的路径，需要改用前缀匹配或正则匹配。

三种可行实现方式 #

根据你的需求，提供不同场景下的匹配方案：

方法1：前缀匹配（最简便通用）

通过startsWith判断路径是否以/item_page/开头，能匹配所有形如/item_page/xxx的商品页面（ID可以是数字、字符串等任意格式）：

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

function AddToCart() {
  const location = useLocation();
  const isItemPage = location.pathname.startsWith('/item_page/');

  return isItemPage && ( 
    <span className='add-to-cart'>
      <button>Add Item</button>
      <button>Cart</button>
    </span>
  );
}

export default AddToCart;

方法2：正则精确匹配数字ID

如果只想匹配数字格式的商品ID页面（比如/item_page/2、/item_page/123），用正则表达式精准过滤：

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

function AddToCart() {
  const location = useLocation();
  // 匹配 /item_page/ 后接一个或多个数字的路径
  const isItemPage = /^\/item_page\/\d+$/.test(location.pathname);

  return isItemPage && ( 
    <span className='add-to-cart'>
      <button>Add Item</button>
      <button>Cart</button>
    </span>
  );
}

export default AddToCart;

方法3：正则匹配任意非空ID

如果需要严格区分/item_page（无ID）和/item_page/xxx（带ID）的页面，用该正则匹配所有带非空后缀的路径：

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

function AddToCart() {
  const location = useLocation();
  const isItemPage = /^\/item_page\/.+$/.test(location.pathname);

  return isItemPage && ( 
    <span className='add-to-cart'>
      <button>Add Item</button>
      <button>Cart</button>
    </span>
  );
}

export default AddToCart;

选择建议 #

• 若商品ID格式不固定，优先用方法1；
• 若仅允许数字ID，选方法2避免误匹配其他路径；
• 若需要严格区分无ID和带ID的页面，用方法3。

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