antd、react-router-dom v4 解决菜单和地址同步问题
点击不同的菜单,右边内容做相应的变化。
不过,对于后退操作和刷新页面操作无效,左边菜单无法保持选中项高亮。
解决思路如下:
Menu 用 seletedKeys 来决定哪项被选中。需要判断当前选前的路由是什么,可以借助 withRouter。自己做的例子:https://github.com/cag2050/react_eject_antd_demo/blob/master/src/components/MenuDemo.js
与vue UI 库 ElementUI 对比:
el-menu 组件,使用vuex的 this.$route.path:
computed: {
defaultActive () {
return this.$route.path
}
}
antd、react-router-dom v4 解决菜单和地址同步问题的更多相关文章
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- React Router V4发布
React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- [React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...
- [React Router v4] Redirect to Another Page
Overriding a browser's current location without breaking the back button or causing an infinite redi ...
- [React Router v4] Render Multiple Components for the Same Route
React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...
- [React Router v4] Conditionally Render a Route with the Switch Component
We often want to render a Route conditionally within our application. In React Router v4, the Route ...
- [React Router v4] Render Catch-All Routes with the Switch Component
There are many cases where we will need a catch-all route in our web applications. This can include ...
- [React Router v4] Render Nested Routes
With React Router v4 the entire library is built as a series of React components. That means that cr ...
随机推荐
- Oracle学习(二)_多表操作
--第一部分:SQL基础 --ch1 简单查询 --ch2 查询基本概念 --ch3 数据过滤 --第二部分:多表操作 --ch4 集合理论 --ch5 内连接 --ch6 外连接 --ch7 子查询 ...
- L317 电子烟
Why it’s so hard to talk about e-cigarette risks A growing proportion of American adults consider va ...
- git工具学习
最近实习的时候,遇到git工具,发现好强大之前没用过,特来学习下,然后自己注册了一个github账号,结合git命令练习一下,git的安装就不说了. 学习资料来源:廖雪峰Git教程 git简介: gi ...
- selenium 自动化安装火狐谷歌插件
谷歌插件下载地址 https://npm.taobao.org/mirrors/chromedriver selenium下载地址 https://pypi.org/simple/selenium/ ...
- ubantu清理垃圾文件操作
安装的ubuntu 18.01 , 随着使用的时间变长,陆陆续续使用了不少的软件, 更新了不少的软件包. 导致了现在ubuntu 系统反应速度严重下降. 下面是几种清理linux系统下冗余垃圾的命令, ...
- python day 07-数据类型补充,集合,深浅拷贝
一.基础数据类型补充 1.列表转字符串 a='A'.join(['c','c','s']) print(a) 2.循环删除列表中的每⼀一个元素 lst=['asdf','dftgst','zsdrfs ...
- SQL注入之Sqli-labs系列第十三关(基于单引号POST的报错注入)
开始挑战第十三关(Double Injection- String- with twist) 访问地址,输入报错语句 ' '' ') ") - 等使其报错 分析报错信息 很明显是需要采 ...
- Java单链表简单实现* @version 1.0
package com.list; /** * 数据结构与算法Java表示 * @version 1.0 * @author 小明 * */ public class MyLinkedList { p ...
- Python中random模块在主函数中设置随机种子是否对于调用的函数中的随机值产生影响?
一个问题,加入我有一个工程文件,在main函数里面调用random模块,设置随机种子,主函数中的随机种子的设置是否会影响主函数所调用的函数中的随机值? 实际上这个问题非常重要,比如你在跑网络的时候,初 ...
- js知识点: 数组
1.行内元素 margin padding 左右值都有效,上下值都无效 2.var ev = ev || window.event document.documentElement.clientW ...