react+redux+antD Menu组件实现页面路由跳转

问题描述:页面跳转有两种情况

        1 点击左侧导航栏进行跳转

        2 页面中的点击事件进行跳转

        需要存储当前页面路径的状态以及将左侧导航栏的选中状态与当前页面的路径保持一致。

项目技术:react的函数式组件 + redux + antD5.0 Menu组件

解决思路:1 Menu组件的selectedKeys属性指向当前选中的items项,应使用变量控制其显示,需要注意,这个变量需要与items项数组中的key值保持一致,否则Menu组件的选中效果将会消失。defaultSelectedKeys不需要和selectedKeys同时使用,否则只有一个生效。

react+redux+antD Menu组件实现页面路由跳转_第1张图片

 2 页面的导航栏和侧边栏使用一个Frame组件,组件使用antD的Layout布局。使用useEffect实现生命周期效果,监听redux值的变化。

react+redux+antD Menu组件实现页面路由跳转_第2张图片

 3 redux和localStorage配合使用,redux作为全局可改变与监听到的数据,localStorage存储当前页面的状态。我这里存储的是当前用户停留下的页面路由路径。

react+redux+antD Menu组件实现页面路由跳转_第3张图片

 4 这样实现的效果:点击左侧导航栏,页面可以正常跳转;刷新页面,页面可以正常停留在当前页;通过页面其他点击事件跳转页面,左侧导航栏可以同步更新选中的状态。

5 需要注意,在用户退出登录后,需要删除localStorage该项。

问题刚刚解决,思路还比较繁琐,应有更简洁的逻辑,大佬们请指正。

你可能感兴趣的:(react.js,javascript,前端)