Javascript 对面包屑路径使用slice函数

我在我们的项目中有几个URL路径，如下所示：-

hostname:port/abc
hostname:port/def
hostname:port/ghi

其中

ghi组件的面包屑值
为
abc/def/ghi

我正在尝试为breadcrumb中的每个组件实现可导航的breadcrumb，这将需要动态地将我重定向到主机名：port
/breadcrumbitem，如上述URL中所述

我以这种模式将路径值从每个组件传递到面包屑组件：-

props.path
的一些示例值可被视为
/abc
，
/def
，
/ghi

我提出了以下逻辑，使每个breadcrumb项都可以单击到
hostname:port/clickableBreadcrumbItem
，但它没有按预期工作。下面是生成面包屑项的面包屑组件的代码片段

return (
    <>
      <div className="bread-crumb">
        <ul className="bread-crumb-list">
          <li>
            <NavLink exact to="/homepage" activeClassName="active">
              <FontAwesomeIcon icon="home" color="#30343f" size="lg" />
            </NavLink>
          </li>
          <li className="bread-crumb-list-items">
            {/* {props.PageTitle} */}
            {pathnames.map((names, index) => {
              const routeTo = `/${pathnames
                .slice(0)
                .join("/")
                .split(" ")
                .join("")}`;
              const isLast = index === pathnames.length - 1;
              console.log("inside map function");
              console.log("value of routeTo is " + routeTo);
              console.log(typeof routeTo);
              console.log("value of isLast is " + isLast);
              console.log("value of path is " + props.path);
              return isLast ? (
                <p key={names}>{names}</p>
              ) : (
                <NavLink key={names} to={props.path}>
                  {routeTo}
                </NavLink>
              );
            })}
          </li>
        </ul>
      </div>
    </>
  );
};


返回(




{/*{props.PageTitle}*/}
{pathnames.map（（名称，索引）=>{
常量routeTo=`/${路径名
.slice（0）
.join（“/”）
.拆分（“”）
.join（“”）`；
const isLast=index==pathnames.length-1；
日志（“内部映射函数”）；
console.log（“routeTo的值为”+routeTo）；
控制台日志（路由类型）；
console.log（“isLast的值为”+isLast）；
console.log（“路径值为”+props.path）；
最后返回(
{names}
) : (
{routeTo}
);
})}


);
};

有什么方法可以将面包屑路径
/abc/def/ghi/jkl
分解为单独的路径
/abc
，
/def
，
/ghi
并将其作为
主机名：端口/abc
，
主机名：端口/def
，
主机名：端口/ghi

注意：从路径
/abc/def/ghi/jkl
中排除最后一部分，即
/jkl
。此路径
/jkl
将只是一个无法单击的纯文本

编辑-1（回答德鲁·里斯）：-

我在组件中接收的路径值是分开的，正如我在上面所说的

props.path
的一些示例值可以看作是
/abc
，
/def
，
/ghi

为了让它更清楚

对于前端的视觉透视图：-我们需要将它们动态组合为
/abc/def/ghi
，路径的组合将取决于我们当前所在的路径

导航透视图

如果我将鼠标悬停并单击
/abc
，它应该将我们重定向到
hostname:port/abc

如果我将鼠标悬停并单击
/def
，它会将我们重定向到
主机名：port/def

如果我将鼠标悬停并单击
/ghi
，它会将我们重定向到
主机名：port/ghi
我不确定您的目标，但这是否回答了您的问题


const str=`/abc/def/ghi/ijk`
常量拆分路径=（路径）=>{
常量数组=path.split（'/'）；
设i=1；
让final=[]
while（isplitPath（str）.map（（item，index）=>console.log（item））
是可以在“/”上拆分的字符串值吗？现在还不清楚这些路径是否已经分开（因为您加入了它们），或者您是否有一些
“/abc/def/ghi/jkl”
字符串。@drewrese为了让事情更清楚，我更新了上面的一些内容。如果我能回答您的问题，请告诉我。地图回调中的
names
不是您要链接到的路径吗？我觉得这太明显了，所以可能我仍然不理解您的代码或您的请求。您的意思是“并将其作为hostname:port/abc、hostname:port/abc/def、hostname:port/abc/def/ghi传递到URL”吗？路径名包含什么？我已尝试在这个问题中更清楚地说明我的目标。你现在能看一下吗？让我知道我是否能向你解释清楚？使用.split（“/”）然后映射并创建超链接有什么错？编辑答案后，你必须用你自己的html元素替换
console.log
。我实际上能够完成我期望的事情。但我现在唯一看到的是。我不希望最后一个路径
/ijk
是可点击的。我希望它作为一个纯文本连接在面包屑路径的最后。更新代码以检查
数组。长度
与
索引
以查找最后一项