React高阶组件如何创建一个面包屑导航

//这里展示的是react-router4的route示例
letroutes=[
{
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并都附上链接
constBreadcrumbsComponent=({breadcrumbs})=&g免费云主机、域名t;(

{breadcrumbs.map((breadcrumb,index)=>(

{breadcrumb}
{index/}

))}

);

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

exportconstgetBreadcrumbs=({flattenRoutes,location})=>{
//初始化匹配数组match
letmatches=[];

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

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

//传递给下一次reduce的路径部分
returnpathSection;
});
returnmatches;
};

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

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

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

/**
*
*/
constrender=({content,path})=>{
constcomponentProps={path};
if(typeofcontent==='function'){
return;
}
return{content};
};

constBreadcrumbsHoc=(
location=window.location,
routes=[]
)=>Component=>{
constBreadComponent=(

);
returnBreadComponent;
};
exportdefaultBreadcrumbsHoc;

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

functionmapStateToProps(state){
return{
routes:state.routes,
};
}

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

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