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 ...
随机推荐
- EF Code First MySql 主从表设计的一些需要注意的内容
假如有下面两张表 public class Main { public int Id{get;set;} public string Name{get;set}; public virtual ICo ...
- Building Tablet PC Applications ROB JARRETT
Building Tablet PC Applications ROB JARRETT Tablet PC 开发,有需要PDF的留下邮箱 目录This text was added by using ...
- 2010年腾讯前端面试题学习(js部分)
看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,学习一下:) 原文地址:https://segmentfault.com/a/1190000012998107 js ...
- mysql 转义字符问题
首先我们要知道,数据库都是由表构成的,当你把数据插入到其中的一个表中的时候,比如是数字呀.文字呀等等的插入的时候能正常插入,但是一旦你要插入特殊的字符,比如说插入下面这个括号里面的内容(“ABC”)到 ...
- VB播放声音
公共Modules定义: Public Declare Function PlaySound Lib "winmm.dll" Alias "PlaySoundA" ...
- Java中的数组初探
1.数组的类型? Java中的数组为引用类型. 2.数组的三种初始化方式 1. int[] arr1=new int[] {1,2,3,4,}; 2. int[] arr2= {1,2,3,4,}; ...
- [LeetCode&Python] Problem 746. Min Cost Climbing Stairs
On a staircase, the i-th step has some non-negative cost cost[i] assigned (0 indexed). Once you pay ...
- Nginx反向代理与Backend直接配置长连接
使用了Nginx的反向代理配置如下: upstream test{ keepalive 1; server 192.168.1.63:4000; } server { listen 4000; ser ...
- pip windows下的引入
安装了python以后,并且环境变量里引入了python安装路径后, 想使用pip来安装未安装的模块,但是命令模式里不能执行pip, 查看python安装路径,发现pip跟easy_install的执 ...
- jmeter定时器
一.定时器的作用 1.定时器是在每个sampler(采样器)之前执行的,而不是之后(无论定时器位置在sampler之前还是下面): 2.当执行一个sampler之前时,所有当前作用域内的定时器都会被执 ...