react + dva + react-router-dom 动态面包屑配置

首先定义数据源

//面包屑列表
const breadcrumbList = [

  { path:'/evaluation',title:'风险评估决策',id:300,pid:0 },
  { path:'/evaluation/userTargeting',title:'用户定位检索',id:301,pid:300 },
  { path:'/evaluation/lyrical',title:'舆情评估',id:302,pid:300 },
  { path:'/evaluation/batch',title:'批量评估',id:303,pid:300 },
  { path:'/evaluation/expand',title:'拓展评估',id:304,pid:300 },
  { path:'/evaluation/history',title:'评估历史',id:305,pid:300 },


  { path:'/riskDisposal',title:'风险处置',id:400,pid:0 },
  { path:'/riskDisposal/domesticEvents',title:'国内事件处置',id:401,pid:400 },
  { path:'/riskDisposal/internationalRiskEvent',title:'国际风险事件处置',id:402,pid:400 },
  { path:'/riskDisposal/earlyWarningLibrary',title:'国内事件预警',id:403,pid:400 },
  { path:'/riskDisposal/collaborativeTeam',title:'协同团队处置事件',id:404,pid:400 },
  { path:'/riskDisposal/eventGeneration',title:'事件新增',id:405,pid:400 },
//这块是动态的路由，参数是id,根据需求配置对应的路由参数
  { path:({id})=>`/riskDisposal/eventContent/details/${id}`,title:'事件详情',id:406,pid:400 },
  { path:({id})=>`/riskDisposal/eventContent/dealWith/${id}`,title:'事件处理',id:407,pid:400 },
  { path:({id})=>`/riskDisposal/eventContent/evaluation/${id}`,title:'事件评估',id:408,pid:400 },
  { path:({id})=>`/riskDisposal/eventContent/plan/${id}`,title:'事件预案',id:409,pid:400 },


];

页面配置路由如下
面包屑组件显示在固定位置

function App(){
  return(
    <>
      
      
      
          
          
          
        
    
  )
}

RiskDisposal 组件内部路由

const RiskDisposal = ()=>{
  return(
    
     
     
     
     
     
    
  )
}
//这里需要一个高阶组件，用户获取 props.match.params 动态路由信息
export default dynamicBreadcrumbs(RiskDisposal);

这里是面包屑组件

//获取动态路由,用来设置 params 值
export const dynamicBreadcrumbs = (Component)=>{
  return connect()((props)=>{
    let { params } = props.match;
    //这里是只调用一次，防止多次render

    //主要是将封装后的子组件里面可以获取到 props.match.params 里面的动态参数

    //intervalExecution(()=>{
      //触发面包屑组件渲染
      props.dispatch({ type:'breadcrumb/setValue',dynamicParams:params });
    //},0,Component);
    return 
  })
};

//根据地址栏地址，返回按照顺序的面包屑值
const getBreadCrumbList = (pathname,params,arr = [])=>{
  //breadcrumbList 这里就是那个面包屑数据
  let data = breadcrumbList.find(x=>{
    if ( typeof x.path === 'string'){
      return x.path === pathname;
    } else {
      return x.path(params) === pathname;
    }
  });
  if ( !data ){
    return arr;
  }
  arr.unshift(data);
  if ( data.pid === 0 ){
    return arr;
  } else {
    let current = breadcrumbList.find(x=>x.id === data.pid);
    return getBreadCrumbList(current.path,params,arr);
  }
};

//面包屑组件
const Breadcrumb= ({ dynamicParams,location })=>{

  //拿到地址
  let { pathname } = location;
  //根据地址和动态路由去获取 面包屑 
  let breadcrumb = getBreadCrumbList(pathname,dynamicParams);
  //把函数 path 转化成字符串 path
  let strBreadcrumb = breadcrumb.map(item=>{
    if ( typeof item.path === 'string'){
      return item;
    } else {
      return {...item,path:item.path(dynamicParams)}
    }
  });

  return (
    

      { strBreadcrumb && strBreadcrumb.length > 0 ? (
        

            { strBreadcrumb.map((x,i) => {
              if( i === ( breadcrumb.length - 1 ) ){
                return {x.title}
              }
              return (
                
                  { x.path && x.pid !== 0 ?
                    {x.title}
                    :
                    {x.title}
                  }
                   > 
                
              )
            })}
        
      ):null}
    
  )
};


//拿到redux 里面 breadcrumb 的全部值 
export default connect(({breadcrumb})=>({...breadcrumb}))(Breadcrumb);

dva 面包屑 reudx,主要是用来设置动态面包屑

//设置动态面包屑
export default {

  namespace: 'breadcrumb',

  state: {
    dynamicParams:{}
  },

  reducers: {
    setValue(state, { dynamicParams }) {
      return { ...state, dynamicParams };
    },
  },

};

大概思路就是面包屑用用一个组件，每次render的时候拿到 地址 和 动态路由，如果要显示的页面是动态路由，那么就需要一个高阶组件用来获取这个组件的 动态路由值 ， 然后触发 dispatch ， 面包屑组件拿到对应的 动态路由 然后渲染出组件。如果不是动态路由，那么可以不要高阶组件