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