React 16.x折腾记 - (1) React Router V4 和antd侧边栏的正确关联及动态title的实现

最新推荐文章于 2024-08-21 04:32:20 发布

crper

最新推荐文章于 2024-08-21 04:32:20 发布

阅读量7.1k

点赞数 5

分类专栏： React折腾记 React 折腾记文章标签： react侧边栏 react 动态标题

本文链接：https://blog.csdn.net/crper/article/details/81541678

版权

本文介绍了如何在React 16.x中将React Router V4与antd的侧边栏正确关联，并实现动态title。通过维护静态路由表，结合路由信息动态渲染侧边栏，实现点击侧边栏时标题变化和高亮对应项。同时，文章讨论了拓展功能，如权限控制和过渡效果，并提供了基础版和拓展版的实现代码。

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

前言

一如既往,实战出真理，有兴趣的可以瞧瞧,没兴趣的大佬请止步于此。

效果图

基于antd的sidebar组件封装

折腾记的技术栈选型

Mobx & mobx-react(用起来感觉良好的状态管理器)
React 16.4.2 (从这个起步,用新不用旧)
React Router V4 (如上)
antd (版本追求如上 , 阿里出品的UI框架)
styled-components (不想写单独的样式文件,用这个是棒棒的,用过都说好)
webpack 4.16.5(版本追求如上)

实现思路

实现思路

自行维护一份静态路由表
结合路由的history对象的pathanme
在组件渲染完毕的情况下,再去遍历路由表,通过setState重新渲染侧边栏
为什么不在组件初始化的时候就设置,那这样对于404的路由没法控制
- react-router-dom v4虽然提供了全局404组件,但是history里面没有代表404的状态

实现目标

点击侧边栏的子菜单会改变标题,对应的item也会高亮
直接修改路由,初次加载等会自动展开对应的分组,高亮对应的子项
不匹配的路由不展开和高亮任何

能学到啥

我尽量注释,而收获见仁见智了

我的思路? 我的的代码姿势? 仅供参考

实现代码

基础版

静态路由表一份

export const sidebarData = [
    {
   
        key: 'group0',
        title: {
   
            icon: 'dashboard',
            text: '数据分析'
        },
        children: [
            {
   
                key: '1',
                text: '数据监控',
                path: '/dashboard/monitor'
            },
            {
   
                key: '2',
                text: '数据分析',
                path: '/dashboard/analyze'
            }
        ]
    },
    {
   
        key: 'group1',
        title: {
   
            icon: 'play-circle',
            text: '音频管理'
        },
        children: [
            {
   
                key: '6',
                text: '声兮列表',
                path: '/voice/sxlist'
            },
            {
   
                key: '7',
                text: '回声列表',
                path: '/voice/calllist'
            }
        ]
    },
    {
   
        key: 'group2',
        title: {
   
            icon: 'schedule',
            text: '活动中心'
        },
        children: [
            {
   
                key: '11',
                text: '活动列表',
                path: '/active/list'
            },
            {
   
                key: '12',
                text: '新建活动',
                path: '/active/add'
            }
        ]
    },
    {
   
        key: 'group3',
        title: {
   
            icon: 'apple-o',
            text: