面包屑自动生成

近几天开了个新项目，架子全部由我来搭建，恰好看到之前代码里面包屑的用法很奇怪（每个页面 dispatch 发送本页面的全部路径），看到代码的时候人都傻了 Σ(っ°Д°;)っ，为啥不搞成自动读取的？

花了十几分钟搞了个从路由自动读取的，瞬间舒畅了，还是开新项目好，陈年项目里太多太多惊喜。

路由配置如下，路由增加breadcrumb属性定义好自己的标题：

const routeList = [
  {
    path: '/projects',
    component: Project,
    authority: ['project'],
    breadcrumb: 'project.name',
    children: [
        {
            path: '/projects/create',
            component: Project,
            authority: ['project'],
            breadcrumb: 'project.create',
        }
    ]
  }
];

然后转成一个对应表方便去匹配

let routeBreadcrumbMap = {};
function loopRoutes(list) {
  list.map(item => {
    routeBreadcrumbMap[item.path] = item.breadcrumb;
    if (item.children) {
      loopRoutes(item.children);
    }
  });
}
loopRoutes(routeList);

最后就是在布局文件中监测路由变化，产生变化时重新生成面包屑

useEffect(() => {
    const pathSnippets = location.pathname.split('/').filter(i => i);
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
      const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
      let matchKey = Object.keys(routeBreadcrumbMap).find(key => {
        return pathToRegexp(key).test(url);
      })
      if (routeBreadcrumbMap[matchKey]) {
        return (
          <Breadcrumb.Item key={url}>
            <Link to={url}><FormattedMessage id={routeBreadcrumbMap[matchKey]} /></Link>
          </Breadcrumb.Item>
        );
      }
      return null;
    });

    if (extraBreadcrumbItems.length > 0) {
      setBreadcrumbItems([
        <Breadcrumb.Item key="home">
          <Link to="/"><FormattedMessage id="home" /></Link>
        </Breadcrumb.Item>,
      ].concat(extraBreadcrumbItems));
    } else {
      setBreadcrumbItems([])
    }
  }, [location])

所以说懒人推动科技进步，每个页面设置一次多累啊，全自动才是王道。