javascript - 如何动态设置 useNavigation Hook 的数量？

Question

我正在尝试编写一个 React Breadcrumbs 组件，它会自动设置 react-router-dom 中返回导航所需的数量。

我有一个带有路径名的数组，它的长度可以是 2 或更多。所有项目都是链接，可以返回除最后一个步骤之外的几个步骤

用户(向后两页)/名称(转到上一页)/类型(不活动)

我决定在 react-router-dom 中使用 useNavigation 钩子(Hook)返回。

// This is my array, for instance
const pathnames = ['users', 'name', 'type'];

所以我需要一个看起来像这样的函数/方法。

pathTokens.map((item, index, arr) => {
 if (item !== arr[arr.length - 1]) {
   return <BreadcrumbsItem action ={() => navigate(numberOfStepsBack)} content={item}/>
 } else {
   return <BreadcrumbsItem content={item}/>
 }
});

Answer 1

如果我对您的问题的理解正确，您希望计算每个面包屑段允许的后退导航数量。

给定:

• const pathnames = ['users', 'name', 'type'];
• users (向后翻两页，-2)/name (转上一页，-1)/type (无效，0)

使用等式 index + 1 - pathnames.length计算每个映射的面包屑段的反向导航数量。

<表类="s-表"><头>片段索引等式: index + 1 - pathnames.length 返回<正文> users 0 0 + 1 - 3 -2 name 1 1 + 1 - 3 -1 type 2 2 + 1 - 3 0

应用于您的映射函数:

pathTokens.map((item, index, arr) => {
  const numberOfStepsBack = index + 1 - arr.length;
  const action = () => navigate(numberOfStepsBack);
  return (
    <BreadcrumbsItem
      {...numberOfStepsBack ? { action } : {}}
      content={item}
    />
  );
});