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 ...
随机推荐
- 循环神经网络-Dropout
dropout 是 regularization 方法,在rnn中使用方法不同于cnn 对于rnn的部分不进行dropout,也就是说从t-1时候的状态传递到t时刻进行计算时,这个中间不进行memor ...
- codeforce150A(简单的求质数问题)
A. Win or Freeze time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...
- 互评Final版本
作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2478] 基于NABCD评论作品,及改进建议 杨老师粉丝群.作品:<Pin ...
- 使用ext httpProxy代理获取列表但列表展示不全的问题解决
今天项目中遇到一个奇葩的事情,使用ext的jsonstore通过httpproxy代理想要获取一个列表,页面显示是有五条数据的但是却只展示了2条,于是各种排查,后台确定无误后开始检查前台,发现浏览器中 ...
- TCP/IP协议的四个层及作用
- HDU 1808 Halloween treats(抽屉原理)
题目传送:http://acm.hdu.edu.cn/showproblem.php?pid=1808 Problem Description Every year there is the same ...
- scp 脚本
#!/bin/bash ty=$ local_dir=$ remote_ip=$ remote_dir=$ showUsage() { echo -e "\033[31m ty local_ ...
- 大数据-04-Hbase入门
本文主要来自于 http://dblab.xmu.edu.cn/blog/install-hbase/ 谢谢原作者 本指南介绍了HBase,并详细指引读者安装HBase. 前面第二章学习指南已经指导大 ...
- mysql 数据查询全讲
数据查询 涉及到DQL(Data Query Language)是sql语句的一类 本文全面介绍了mysql下 select 语句的各种查询方式:普通查询,模糊查询,查询排序,分页查询,聚合函数查询 ...
- 机器学习:Kullback-Leibler Divergence (KL 散度)
今天,我们介绍机器学习里非常常用的一个概念,KL 散度,这是一个用来衡量两个概率分布的相似性的一个度量指标.我们知道,现实世界里的任何观察都可以看成表示成信息和数据,一般来说,我们无法获取数据的总体, ...