我有一个购物应用程序组件，我只想在特定页面上显示。尝试了 useLocation 但该组件具有动态 id

Question

我想知道如何使下面代码中的“页面”变量动态化，这样我就可以正确地将其与具有动态页面 ID 的“useLocation().pathname”变量进行比较。

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

function AddToCart() {

    function IsItemPage() {
        const page = '/item_page';
        const location = useLocation();
        console.log(location);
        if (location.pathname == page) {
            return true;
        };
    }

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

export default AddToCart;

现在我从主页打开的每个项目都有一个唯一的 ID，例如：“/item_page/2”，显然我无法对其进行硬编码。如果我提供“page”变量的绝对路径，例如“/item_page/1”或其他内容，则该组件将按预期工作，但仅适用于带有“id：1”的特定项目。但我需要能够为从主页打开的每个项目实现此目的。

那么我怎样才能实现这个目标呢？

提前非常感谢。

Answer 1

我建议您对父组件而不是子组件进行条件检查。

商品页面：

function ItemPage() {

    return ( 
        <>
           {condition && <AddToCart />}
        </>
    );
}

export default AddToCart;

添加到卡：

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

function AddToCart() {

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

export default AddToCart;

如果您想在每个商品页面上显示添加到购物车。您不必包含条件检查。