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 ...
随机推荐
- angular2的依赖注入
更好阅读体验,请看原文 在读这篇文章之前,你要先了解一下什么是依赖注入,网上关于这个的解释很多,大家可以自行Google. 我们这一篇文章还是以QuickStart项目为基础,从头开始讲解怎么在Ang ...
- 多路复用 阻塞/非阻塞IO模型 网络IO两个阶段
1.网络IO的两个阶段 waitdata copydata send 先经历:copydata阶段 recv 先经历:waitdata阶段 再经历 copydata阶段 2.阻塞的IO模型 之前写的都 ...
- 爬虫系列5:scrapy动态页面爬取的另一种思路
前面有篇文章给出了爬取动态页面的一种思路,即应用Selenium+Firefox(参考<scrapy动态页面爬取>).但是selenium需要运行本地浏览器,比较耗时,不太适合大规模网页抓 ...
- CSS3一个酷炫的加载效果
上效果图,用截屏工具制作的,看起来有点卡,在网页上面显示还是不错的. CSS代码: <style type="text/css"> .loader{ position: ...
- python3+requests:get/post请求
1.get请求 (1)没有请求参数类型 response = requests.get(url='') print(response.text) (2)有请求参数的类型(键值对形式表示参数) resp ...
- [转]SSH反向连接及Autossh
http://www.cnblogs.com/eshizhan/archive/2012/07/16/2592902.html SSH反向连接及Autossh 0.接触Linux恐怕对SSH再熟悉不过 ...
- 2018上C语言程序设计(高级)作业- 第3次作业
作业要求一 6-1 输出月份英文名 6-2 查找星期 6-3 计算最长的字符串长度 6-4指定位置输出字符串 6-5奇数值结点链表 6-6学生成绩链表处理 6-7链表拼接 作业要求二 题目6-1输出月 ...
- 使用matlab和ISE 创建并仿真ROM IP核
前言 本人想使用简单的中值滤波进行verilog相关算法的硬件实现,由于HDL设计软件不能直接处理图像,大部分过程都是可以将图像按照一定的顺序保存到TXT文档中,经过Modelsim仿真后,处理的数据 ...
- DQN-深度Q网络
深度Q网络是用深度学习来解决强化中Q学习的问题,可以先了解一下Q学习的过程是一个怎样的过程,实际上就是不断的试错,从试错的经验之中寻找最优解 关于Q学习,我看到一个非常好的例子,另外知乎上面也有相关的 ...
- pytorch实现autoencoder
关于autoencoder的内容简介可以参考这一篇博客,可以说写的是十分详细了https://sherlockliao.github.io/2017/06/24/vae/ 盗图一张,自动编码器讲述的是 ...