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 ...
随机推荐
- 文件操作---with语句
with语句 为了避免打开文件后忘记关闭,可以通过管理上下文,即: with open('file','r','encoding='uth-8'') as f: #f为文件句柄 for line in ...
- day 96 关于分页的使用
分页的学习主要四步骤 from django.db import models # Create your models here. class Book(models.Model): title = ...
- Java学习笔记13(equals()方法;toString()方法)
equals()方法: equals方法是Object类中的方法:Object是所有类的祖宗,所以所有类都有equals()方法: boolean equals(Object obj); equals ...
- memset memcpy
memset与memcpy的用法: void *memset(void *s,int c,size_t n)总的作用:将已开辟内存空间 s 的首 n 个字节的值设为值 cmemset可以方便的清空一个 ...
- Spring MVC — @RequestMapping原理讲解-1
转载地址 :http://blog.csdn.net/j080624/article/details/56278461 为了降低文章篇幅,使得文章更目标化,简洁化,我们就不例举各种@RequestMa ...
- Spring Boot 揭秘与实战 源码分析 - 工作原理剖析
文章目录 1. EnableAutoConfiguration 帮助我们做了什么 2. 配置参数类 – FreeMarkerProperties 3. 自动配置类 – FreeMarkerAutoCo ...
- 2.14 加载Firefox配置
2.14 加载Firefox配置(略,已在2.1.8讲过,请查阅2.1.8节课) 回到顶部 2.14-1 加载Chrome配置 一.加载Chrome配置chrome加载配置方法,只需改下面一个地方,u ...
- jsp-servlet(1)环境搭建(Tomcat和myeclipse)和基本概念
1 Tomcat安装 下载并解压: 点击bin目录下的start.bat文件启动(这里可能会报错,initinternal failed ,检查8080端口是不是被占用了,然后重新启动); 访问loc ...
- 12.2 关闭DLM 自动收集统计信息 (SCM0)ORA-00600之[ksliwat: bad wait time]
一.报错日志 db_alert ORA-: ??????, ??: [ksliwat: bad wait time], [], [], [], [], [], [], [], [], [], [], ...
- Anaconda canda 安装 Python3 配置
链接: 1.安装Python 3.5以及tensorflow 以前用virtualenv觉得挺好用了,但是用多python版本下安装tensorflow,出现问题: pip is configured ...