React-router杂记
- HashRouter: 即对应url中的hash值,如xx.com/#/a、xx.com/#/a/b, 服务器对任务url都返回同一个url,具体的路径由浏览器区分,因为浏览器不会发送hash后面的值给服务器。
- BrowserRouter:如果是BrowseRouter即url变成这样,xx.com/a、xx.com/a/b, 所以要对服务器配置不同的url返回不同的资源。
- MemoryRouter: 就是没有URL的情况,比如(React Native)。
**react-router的哲学**
https://github.com/rccoder/blog/issues/29
- 动态路由,每一个route都是一个组件,更好的配合React
- 路由嵌套
**react-router和redux问题**
有时候,当location改变,组件并没有更新(子路由组件或者activity link),主要是因为:
1.组件直接通过redux的connect
2.该组件不是路由组件,也就是没有这样的代码
```
原因是redux内部实现了shouldComponentUpdate,但又没有从react-router接收到props,意味着不会改变。解决办法:
// before
export default connect(mapStateToProps)(Something)
// after
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))
React-router杂记的更多相关文章
- [Redux] Filtering Redux State with React Router Params
We will learn how adding React Router shifts the balance of responsibilities, and how the components ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- [Redux] Navigating with React Router <Link>
We will learn how to change the address bar using a component from React Router. In Root.js: We need ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)
请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
随机推荐
- 微信小程序之canvas绘制海报分享到朋友圈
绘制canvas内容 首先,需要写一个canvas标签,给canvas-id命名为shareBox <canvas canvas-id="shareBox"></ ...
- 使用Skaffold一键将项目发布到Kubernetes
当前skaffold版本为v0.4,还未发布正式版本,不建议在生产环境中使用: skaffold用于开发人员快速部署程序到Kubernetes中:skaffold提供了dev.run两种模式:使用sk ...
- 201771010126 王燕《面向对象程序设计(Java)》第十周学习总结
实验十 泛型程序设计技术 实验时间 2018-11-1 1.实验目的与要求 (1) 理解泛型概念: 泛型:也称参数化类型(parameterized type),就是在定义类.接口和方法时,通过类型 ...
- NOIP2017感悟
Day1 第一次会做的题这么多却比以前靠的更差. 其实停课期间水平还是提升了很多,但是做题速度和心态问题一就是我最难克服的一个地方. 题目很简单,但是又很恶心,主要是我代码能力太差,第二题调不出来,第 ...
- python中的单向链表实现
引子 数据结构指的是是数据的组织的方式.从单个数据到一维结构(线性表),二维结构(树),三维结构(图),都是组织数据的不同方式. 为什么需要链表? 顺序表的构建需要预先知道数据大小来申请连续的存储空间 ...
- Oracle 闪回 找回数据
使用闪回技术,实现基于磁盘上闪回恢复区的自动备份与还原. 一.恢复表对象 1.创建学生表 create table STUDENT ( idno INTEGER, name VARCHAR2(30), ...
- nodejs操作mysql常见错误
1.Cannot enqueue Handshake after already enqueuing a Hand shake.这个错误提示意思是某个数据库连接已经执行了,不能进行多次连接了.遇到此类 ...
- Linux服务器之间进行文件目录映射/挂载(总结)
Linux服务器之间进行文件目录映射/挂载(总结) 需要实现的功能为:将192.168.10.10服务器下的 /home/要映射的目录/ ,映射为192.168.10.90服务器下的 /home/被映 ...
- emWin录音机,含uCOS-III和FreeRTOS两个版本
第12期:录音机配套例子:V6-921_STemWin提高篇实验_录音机(uCOS-III)V6-922_STemWin提高篇实验_录音机(FreeRTOS) 例程下载地址: http://forum ...
- 【分享】【原创开源应用第4期】给ili9488,RA8875类显示屏的emWin底层增加DMA加速方案
说明:1.emWin底层中最重要的一个优化就是16bpp绘制,特此为其增加DMA加速,已经支持RA8875和ili9488.2.使用中务必将emWin任务设置为除了空闲任务,统计任务以外的最低优先级, ...