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 ...
随机推荐
- JAVA基本类型和包装类
JAVA的包装类 Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的,这在实际使用时存在很多的不便,为了解决这个不足,在设计类时为每个基本数据类型设计了一个对应的类进行代表 ...
- js replace
<script type="text/javascript">// replace() 方法执行查找并替换操作,有两个参数,第一个是查找的正则表达式,第二个是callb ...
- JavaWeb:c3p0配置问题java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector
错误显示 java.lang.NoClassDefFoundError: com/mchange/v2/ser/Indirector at dbdemo.JdbcUtils.<clinit> ...
- for&while循环
流程控制: 1. if 2. while 3. for if判断 什么是if判断 判断一个条件成立则做...不成了则做... 为何要有if判断 让计算机像人一样具有判断的能力 什么是循环 循环指的是一 ...
- diary of laravel
1. 修改数据库连接 初始化数据库: 首先: 修改 config- database.php 中的 数据库链接 其次:修改 .env 中数据库链接 创建表: php artisan migr ...
- mssql,mysql,Oracle 数据库中获得UUID字符串
sql server : select replace(newId(),'-','') oracle :select sys_guid() from dual SQL> select sys_g ...
- multi-thread debug
1.不要去解锁一个未被加锁的mutex锁: 2.不要一个线程中加锁而在另一个线程中解锁: 3.使用mutex锁用于保护临界资源,严格按照“加锁-->写入/读取临界资源-->解锁”的流程执行 ...
- Python之路,第二十篇:Python入门与基础20
python3 面向对象4 supper 函数 supper(type, obj) 返回绑定超类的实例(要求obj必须为type类型的实例) supper() 返回绑定的超类的实例,等同于(cl ...
- JAVA基础部分复习(三、泛型)
JAVA泛型的基本使用: /** * JAVA泛型的使用 * 定义:泛型的本质是参数化类型,就是说所操作的数据类型被指定为一个参数. * * 定义泛型方法的规则 * 1.所有泛型方法声明都有一个类型参 ...
- root/base/stem概念
The verb root (or base form): 1.is the same as the infinitive不定式 (e.g., to dive, to jump, to wonder) ...