react多版块列表展示动态路由跳转总结

前段时间用了三四天做了一个有意思的需求：是一个系统新闻展示页，一个页面有公告，新闻，专题三个板块，只有一个作为主要展示以列表形式，其他则以卡片加滚动条展示，颇有感触，遂记。
1）首先是列表主要展示内容的来回展现：我对列表标题起了不同的名字加以区分，方便以后凭借名字作判断

    tab1 : "公司要闻",
    tab2 : "沃分享--技术沙龙",
    },

随后写了一个切换标题方法，并以标题写入列表相关方法与数据

const onSwitch = () => {
            dispatch({
              type:'extra/updateState',
              payload:{
                tab1:tab2,
                tab2:tab1,
              }
            })
           }

 dataSource={tab1==="公司要闻"?listAll || []:infoShareListFirst || []}
                        pagination = {tab1==="公司要闻"?pagination:sharePagination}
                        onChange = {tab1==="公司要闻"?onChange:onChange2}

现在就将两个列表的属性区分开 防止共用一个造成混乱

2）进入详情页的路由

title: '标题名称',
                dataIndex: 'infoTitle',
                key: 'infoTitle',
                align: 'left',
                width:300,
                render: (text, record) => {
                  return (
                    tab1==='公司要闻'?
                    <div className={styles.tableRowStyle}>
                      <Tooltip placement="topLeft" title={text}>
                        <a onClick={() => { router.push (`/dashboard/extraInfo/infoDetail?id=${record.id}&tab1=${tab1}&tab2=${tab2}&page=${pagination.current}`)}}>{text}</a>
                      {/* <Link to={{pathname:`/dashboard/infoDetail?id=${record.id}`,
                                                        state:{id:record.id}}}>{text}</Link> */}
                      </Tooltip>
                    </div>:<div className={styles.tableRowStyle}>
                      <Tooltip placement="topLeft" title={text}>
                        <a onClick={() => { router.push (`/dashboard/extraInfo/infoDetail?id=${record.id}&tab1=${tab1}&tab2=${tab2}&sharepage=${sharePagination.current}`)}}>{text}</a>
                      {/* <Link to={{pathname:`/dashboard/infoDetail?id=${record.id}`,
                                                        state:{id:record.id}}}>{text}</Link> */}
                      </Tooltip>
                      </div>)
                       },

将id以路由方式带入详情页以查询内容，其中我注释掉的传值方式如果用户在详情页刷新参数将丢失报错，传入tab值和页码是为了详情返回时回到用户在列表页的阅读状态，相当于做了标记

3）详情页的返回路由

{tab1=='公司要闻'?
             <Breadcrumb.Item><a onClick={() => { router.push (`/dashboard/extraInfo?tab1=${tab1}&tab2=${tab2}&page=${page}`)}}>{tab1}</a></Breadcrumb.Item>
             :<Breadcrumb.Item><a onClick={() => { router.push (`/dashboard/extraInfo?tab1=${tab1}&tab2=${tab2}&sharepage=${sharepage}`)}}>{tab1}</a></Breadcrumb.Item>
            }

将值原封不动的返回，作为列表页初始查询的条件

if (match) {
              const query = location.query 
              dispatch({ type: 'queryInfo',payload:{id:query.id}})
              if(query.page){
              dispatch({ type: 'updateState',payload:{tab1:query.tab1,
                                                      tab2:query.tab2,
                                                      page:query.page}})
              } else {
                dispatch({ type: 'updateState',payload:{tab1:query.tab1,
                  tab2:query.tab2,
                  sharepage:query.sharepage}})
              }
            }

类似于此 在model层订阅处做判断得以在加载时渲染正确的页面

总结：面包屑导航并没有真正的动态生成，有项目局限性，考虑数组生成导航，路由写在地址栏可能也不安全，以后学到再更新。