关于javascript:breadCrumb导航栏的展示与删除

BreadcrumbNameMap：菜单名文件；
1、新建路由与菜单名称绝对应的 BreadcrumbNameMap.js 文件，在 frame.js 文件 (管制路由跳转即页面显示) 中引入；
2、在 frame.js 文件中引入 Breadcrumb
3、获取以后页面的 url(即：props.location.pathname)
4、应用 ahooks 中的 useLocalStorageState 存储路由以便做到刷新后面包屑依然展现

const [choseRoutes, setChose] = useLocalStorageState('choseRoutes', () => {return [];
  });

5、获取所有展现页面的路由

if (choseRoutes.length > 0) {setChose([...choseRoutes, url]);
  } else {setChose([url]);
}

6、过滤曾经存在的路由

const remainRoutes = choseRoutes.filter((item, RouteIndex, array) => {return array.indexOf(item) === RouteIndex;
  });

7、对路由数组进行遍历展现

remainRoutes.map((i, openIndex) => {
  return (<Breadcrumb className={i === url ? 'bgw' : 'bgfa'} separator="">
      <Breadcrumb.Item>
        <Link to={i}>{BreadcrumbNameMap[i]}</Link>

        <a
          onClick={() => {if (remainRoutes.length <= 1) {message.info('页面导航不可全副删除');
            } else {// BreadcrumbNameMap[i]页面展现路由名称，delIndex 删除路由在 remainRoutes 中的下标 delIndex
              console.log(i, url, openIndex);
              // i===delete 路由 则更新页面内容
              if (i === url) {if (openIndex === 0) {props.history.push(remainRoutes[openIndex + 1]);
                } else {props.history.push(remainRoutes[openIndex - 1]);
                }
              }
              remainRoutes.splice(openIndex, 1); // 删除相应下标的 url
              setChose(remainRoutes);
            }
          }}
        >
          删除
        </a>
      </Breadcrumb.Item>
    </Breadcrumb>
  );
})