如何动态设置 useNavigation 挂钩的数量？

Question

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

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

users(往后两页)/name(往前一页)/type(inactive)

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

// 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 计算每个映射的面包屑片段的后退导航数。

Segment	index	equation: index + 1 - pathnames.length	goBack
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}
    />
  );
});