如何动态设置使用导航钩子的数量?

Question

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

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

用户(返回两页)/名称(上一页)/类型(非活动)

我决定在 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计算每个映射痕迹导航段的后退导航数。

goBackstyle="文本对齐：居中;">usersstyle="文本对齐：居中;">namestyle="文本对齐：居中;">type

Segment	index	equation：index + 1 - pathnames.length
0	0 + 1 - 3	-2
1	1 + 1 - 3	-1
2	2 + 1 - 3	0