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 in与exist条件分析
select ...from user in('a','b','c'):in支持多个条件同时查询
- 5.Python爬虫入门五之URLError异常处理
大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本机无法上网 连接不到特定的 ...
- ios 手机验证码用户注册(倒计时15秒)
// // ViewController.m // register手机验证码注册 // // Created by zzqqrr on 17/8/28. // Copyright (c) 2017年 ...
- dd 命令的使用
linux 下dd命令直接清除分区表(不用再fdisk一个一个的删除啦) 分区表是硬盘的分区信息,要删除一个硬盘的所有分区表很麻烦的,需要fdisk一个一个的删除,其实dd命令可直接清除分区信息,当然 ...
- 分析攻击IP来源地并画出饼图
此文中的API将台湾列为国家,非本人立场,台湾属于中国,台湾岛生活的人不一定! 上码: #!/usr/bin/python #coding=utf-8 ''' http://ip-api.com/js ...
- ubuntu16.04系统安装
0x1镜像下载 (1)下载地址http://cn.ubuntu.com/download/ 0x2 安装 (1)打开vmware,创建新的虚拟机 (2)选择自定义安装 (3)直接下一步,选择稍后安装系 ...
- socket 映射服务器程序
server #include <stdio.h> #include <sys/types.h> /* See NOTES */ #include <sys/socket ...
- Foxmail软件添加QQ邮箱报错
#报错现象: -ERR Please using authorized code to login. More information at http://servi 请使用授权代码登录.http:/ ...
- Insert插入不同的列数量,统计信息对比
一.实验目的: Insert插入表中相同的行数量,不同的列数量,通过10046 和autotrace工具对比查看逻辑读.物理读.time数据,并得出相应结论 二.测试 2.1测试流程: =>[为 ...
- PTA——支票面额
PTA 7-38 支票面额 #include<stdio.h> int main() { int n,f,y; ; scanf("%d",&n); ; flag ...