如何使用React实现一个面包屑导航-创新互联

如何使用React实现一个面包屑导航？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

什么是 React 高阶组件

React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件，并返回处理完成后的 React 组件。React 高阶组件在 React 生态中使用的非常频繁，比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的。

使用 React 高阶组件的好处

在工作中，我们经常会有很多功能相似，组件代码重复的页面需求，通常我们可以通过完全复制一遍代码的方式实现功能，但是这样页面的维护可维护性就会变得极差，需要对每一个页面里的相同组件去做更改。因此，我们可以将其中共同的部分，比如接受相同的查询操作结果、组件外同一的标签包裹等抽离出来，做一个单独的函数，并传入不同的业务组件作为子组件参数，而这个函数不会修改子组件，只是通过组合的方式将子组件包装在容器组件中，是一个无副作用的纯函数，从而我们能够在不改变这些组件逻辑的情况下将这部分代码解耦，提升代码可维护性。

自己动手实现一个高阶组件

前端项目里，带链接指向的面包屑导航十分常用，但由于面包屑导航需要手动维护一个所有目录路径与目录名映射的数组，而这里所有的数据我们都能从 react-router 的路由表中取得，因此我们可以从这里入手，实现一个面包屑导航的高阶组件。

首先我们看看我们的路由表提供的数据以及目标面包屑组件所需要的数据：

// 这里展示的是 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 }) => (
 

  {breadcrumbs.map((breadcrumb, index) => (
   
    {breadcrumb}
    {index < breadcrumbs.length - 1 &&  / }
   
  ))}
 
);