利用React高阶组件实现一个面包屑导航的示例

// 这里展示的是 react-router4 的route示例
let routes = [
 {
  breadcrumb: '一级目录',
  path: '/a',
  component: require('../a/index.js').default,
  items: [
   {
    breadcrumb: '二级目录',
    path: '/a/b',
    component: require('../a/b/index.js').default,
    items: [
     {
      breadcrumb: '三级目录1',
      path: '/a/b/c1',
      component: require('../a/b/c1/index.js').default,
      exact: true,
     },
     {
      breadcrumb: '三级目录2',
      path: '/a/b/c2',
      component: require('../a/b/c2/index.js').default,
      exact: true,
     },
   }
  ]
 }
]

// 理想中的面包屑组件
// 展示格式为 a / b / c1 并都附上链接
const BreadcrumbsComponent = ({ breadcrumbs }) => (
 <div>
  {breadcrumbs.map((breadcrumb, index) => (
   <span key={breadcrumb.props.path}>
    <link to={breadcrumb.props.path}>{breadcrumb}</link>
    {index < breadcrumbs.length - 1 && <i> / </i>}
   </span>
  ))}
 </div>
);

/**
 * 以递归的方式展平react router数组
 */
const flattenRoutes = arr =>
 arr.reduce(function(prev, item) {
  prev.push(item);
  return prev.concat(
   Array.isArray(item.items) ? flattenRoutes(item.items) : item
  );
 }, []);

export const getBreadcrumbs = ({ flattenRoutes, location }) => {
 // 初始化匹配数组match
 let matches = [];

 location.pathname
  // 取得路径名，然后将路径分割成每一路由部分.
  .split('?')[0]
  .split('/')
  // 对每一部分执行一次调用`getBreadcrumb()`的reduce.
  .reduce((prev, curSection) => {
   // 将最后一个路由部分与当前部分合并，比如当路径为 `/x/xx/xxx` 时，pathSection分别检查 `/x` `/x/xx` `/x/xx/xxx` 的匹配，并分别生成面包屑
   const pathSection = `${prev}/${curSection}`;
   const breadcrumb = getBreadcrumb({
    flattenRoutes,
    curSection,
    pathSection,
   });

   // 将面包屑导入到matches数组中
   matches.push(breadcrumb);

   // 传递给下一次reduce的路径部分
   return pathSection;
  });
 return matches;
};

const getBreadcrumb = ({ flattenRoutes, curSection, pathSection }) => {
 const matchRoute = flattenRoutes.find(ele => {
  const { breadcrumb, path } = ele;
  if (!breadcrumb || !path) {
   throw new Error(
    'Router中的每一个route必须包含 `path` 以及 `breadcrumb` 属性'
   );
  }
  // 查找是否有匹配
  // exact 为 react router4 的属性，用于精确匹配路由
  return matchPath(pathSection, { path, exact: true });
 });

 // 返回breadcrumb的值，没有就返回原匹配子路径名
 if (matchRoute) {
  return render({
   content: matchRoute.breadcrumb || curSection,
   path: matchRoute.path,
  });
 }

 // 对于routes表中不存在的路径
 // 根目录默认名称为首页.
 return render({
  content: pathSection === '/' ? '首页' : curSection,
  path: pathSection,
 });
};

/**
 *
 */
const render = ({ content, path }) => {
 const componentProps = { path };
 if (typeof content === 'function') {
  return <content {...componentProps} />;
 }
 return <span {...componentProps}>{content}</span>;
};

const BreadcrumbsHoc = (
 location = window.location,
 routes = []
) => Component => {
 const BreadComponent = (
  <Component
   breadcrumbs={getBreadcrumbs({
    flattenRoutes: flattenRoutes(routes),
    location,
   })}
  />
 );
 return BreadComponent;
};
export default BreadcrumbsHoc;

withRouter(({ location }) =>
 BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
);

function mapStateToProps(state) {
 return {
  routes: state.routes,
 };
}

connect(mapStateToProps)(
 withRouter(({ location }) =>
  BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
 )
);

withRouter(
 connect(mapStateToProps)(({ location, routes }) =>
  BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
 )
);