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

最新推荐文章于 2024-07-23 10:43:02 发布

hwl19951119

最新推荐文章于 2024-07-23 10:43:02 发布

阅读量898

点赞数

文章标签： react 动态路由面包屑

本文链接：https://blog.csdn.net/hwl19951119/article/details/84939978

版权

本文介绍了在React项目中实现一个多版块（公告、新闻、专题）列表展示的动态路由跳转。通过切换标题方法区分不同板块，利用路由参数传递ID进入详情页，并保持用户阅读状态。同时，探讨了面包屑导航的实现，指出其局限性和安全性问题。

摘要由CSDN通过智能技术生成

前段时间用了三四天做了一个有意思的需求：是一个系统新闻展示页，一个页面有公告，新闻，专题三个板块，只有一个作为主要展示以列表形式，其他则以卡片加滚动条展示，颇有感触，遂记。
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）进入详情页的路由