代码编织梦想

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

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

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

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

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

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

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

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

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

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40713419/article/details/131027323

奇舞周刊第493期:hook 革命!浅谈 react 新 hook 的未来与思想-爱代码爱编程

关注前端生态发展,了解行业动向。 下面先一起看下本期周刊 摘要 吧~ 奇舞推荐 ■ ■ ■  Hook 革命!浅谈 React 新 Hook 的未来与思想 作者阳羡曾写文章对 React 新 Hook use 的设计理念和限制进行了深入分析,并提供了一个可能的实现来帮助读者更好地理解这一概念。本文更是推断,这个全新

20230531----重返学习-redux总步骤-taskoa-react路由管理方案react-router-dom-爱代码爱编程

day-082-eighty-two-20230531-redux总步骤-TaskOA-react路由管理方案react-router-dom redux总步骤 确定基础骨架目录。 fang/f20230531/

react antd modal里form设置值不起作用_antdpro modalform无效-爱代码爱编程

问题描述: react antd Modal里Form设置值不起作用,即使用form的api。比如:编辑时带出原有的值。 造成的原因:一般设置值都是在声明周期里设置,比如:componentDidMounted里设置,hook则在useEffetc里设置,因为Form在Modal里,会造成 form还没渲染完,就已经设置完值的情况 即在调用form的实