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>
  );
})