如何使用React實(shí)現(xiàn)一個面包屑導(dǎo)航

// 這里展示的是 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數(shù)組
 */
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 }) => {
 // 初始化匹配數(shù)組match
 let matches = [];

 location.pathname
  // 取得路徑名，然后將路徑分割成每一路由部分.
  .split('?')[0]
  .split('/')
  // 對每一部分執(zhí)行一次調(diào)用`getBreadcrumb()`的reduce.
  .reduce((prev, curSection) => {
   // 將最后一個路由部分與當(dāng)前部分合并，比如當(dāng)路徑為 `/x/xx/xxx` 時，pathSection分別檢查 `/x` `/x/xx` `/x/xx/xxx` 的匹配，并分別生成面包屑
   const pathSection = `${prev}/${curSection}`;
   const breadcrumb = getBreadcrumb({
    flattenRoutes,
    curSection,
    pathSection,
   });

   // 將面包屑導(dǎo)入到matches數(shù)組中
   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表中不存在的路徑
 // 根目錄默認(rèn)名稱為首頁.
 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)
 )
);