React-router-dom v6。浏览产品答案

【问题标题】：React-router-dom v6. Navigate through productsReact-router-dom v6。浏览产品
【发布时间】：2022-11-23 18:28:44
【问题描述】：

希望有人能在这里帮助我。一直在尝试不同的事情，但最终总是只是延长我的路线。我想要的是能够浏览产品（有点像网店）

所以，当我使用 prod_G6kVw7pV6Oo2eD 作为产品 ID 的第一个产品时

http://localhost:3000/combo/prod_G6kVw7pV6Oo2eD

我需要能够转到下一个产品（来回移动，因为我有 3 个按钮，分别称为“上一个”和“下一个”）。一共6个产品。那是产品 ID 的数组 =

['prod_G6kVw7pV6Oo2eD', 'prod_RyWOwmPkL9lnEa', 'prod_ypbroE9QBno8n4', 'prod_Kvg9l61rEm51bB', 'prod_NqKE50NEPBwdgB', 'prod_kpnNwA1P8awmXB']

一旦我到达最后一个产品 (prod_kpnNwA1P8awmXB)，我需要去第一个产品。

换句话说 - 只需要更改 product_id - 路线的最后一个元素。

我认为有一个很好的解决方案，因为这是一个非常常见的情况。但我找不到。

谢谢！

【问题讨论】：

循环列表结构可以帮助您在这里或手动设置第一个元素的最后一个。

标签： reactjs react-router-dom

【解决方案1】：

你到底是怎么移动的？通过你的数组，如：

const products = [
  'prod_G6kVw7pV6Oo2eD',
  'prod_RyWOwmPkL9lnEa',
  'prod_ypbroE9QBno8n4',
  'prod_Kvg9l61rEm51bB',
  'prod_NqKE50NEPBwdgB',
  'prod_kpnNwA1P8awmXB'
];
let i = 0;

const goToNextProduct(() => {
  setProduct(product[i + 1]);
  i = i + 1;
});

（这是伪代码，不要照原样使用）

但是如果你以这种方式浏览你的产品，你能想象使用：

setProduct(products[(i + 1) % products.length])
i = (i + 1) % products.length

使用模数，每次达到数组限制时它都会返回0

【讨论】：