如何使用反应实现一个面包屑导航

  介绍

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


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


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


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

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

//这里展示的是react-router4的路线示例
  让路线=[
  {
  面包屑:& # 39;一级目录& # 39;,
  路径:& # 39;/一个# 39;
  组件:要求(& # 39;. ./a/index.js& # 39;) .default,
  项目:(
  {
  面包屑:& # 39;二级目录& # 39;,
  路径:& # 39;/a/b # 39;
  组件:要求(& # 39;. ./a/b/index.js& # 39;) .default,
  项目:(
  {
  面包屑:& # 39;三级目录1 & # 39;,
  路径:& # 39;/a/b/c # 39;
  组件:要求(& # 39;. ./a/b/c/index.js& # 39;) .default,
  准确:没错,
  },
  {
  面包屑:& # 39;三级目录2 & # 39;,
  路径:& # 39;/a/b/c # 39;
  组件:要求(& # 39;. ./a/b/c/index.js& # 39;) .default,
  准确:没错,
  },
  }
  ]
  }
  ]//理想中的面包屑组件//展示格式为a/b/c?并都附上链接
  const BreadcrumbsComponent=({面包屑})=比;(
  & lt; div>
  {面包屑。地图((面包屑、索引)=比;(
  & lt;跨越关键={breadcrumb.props.path}祝辞
  & lt;链接={breadcrumb.props.path}在{面包屑}& lt;每日;
  {指数& lt;面包屑。- 1,长度,& lt; i>/& lt;/i>}
  & lt;/span>
  )}
  & lt;/div>
  );

这里我们可以看的到,面包屑组件需要提供的数据一共有三种,一种是当前页面的路径,一种是面包屑所带的文字,一种是该面包屑的导航链接指向。

其中第一种我们可以通过react-router提供的withRouter高阶组件包裹,可使子组件获取到当前页面的位置属性,从而获取页面路径。

后两种需要我们对路线进行操作,首先将路线提供的数据扁平化成面包屑导航需要的格式,我们可以使用一个函数来实现它。

/* *   *以递归的方式展平路由器数反应组   */const flattenRoutes arr==比;   加勒比海盗。减少(函数(上一页,项){   prev.push(项);   返回prev.concat (   Array.isArray (item.items), # 63;flattenRoutes (item.items):项目   );   },[]);

之后将展平的目录路径映射与当前页面路径一同放入处理函数,生成面包屑导航结构。

出口const getBreadcrumbs=({flattenRoutes、位置})=比;{//初始化匹配数组匹配
  让比赛=[];
  
  location.pathname//取得路径名,然后将路径分割成每一路由部分。
  .split(& # 39;及# 63;& # 39;)[0]
  .split (& # 39;/& # 39;//对每一部分执行一次调用“getBreadcrumb()”的减少。
  .reduce((上一页,curSection)=比;{//将最后一个路由部分与当前部分合并,比如当路径为“/x/xx/xxx”时,pathSection分别检查'/x ' '/x/xx ' '/x/xx/xxx的匹配,并分别生成面包屑
  const pathSection=' $ {prev}/$ {curSection} ';
  const面包屑=getBreadcrumb ({
  flattenRoutes,
  curSection,
  pathSection,
  });//将面包屑导入到匹配数组中
  matches.push(面包屑);//传递给下一次减少的路径部分
  返回pathSection;
  });
  返回匹配;
  };

然后对于每一个面包屑路径部分,生成目录名称并附上指向对应路由位置的链接属性。

如何使用反应实现一个面包屑导航