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 ...
随机推荐
- 使用PIA查找组件的PeopleSoft导航
导航到企业组件>查找对象导航. 使用组件名称 使用页面名称 使用辅助页面名称 使用内容参考名称 只需输入对象名称,然后单击“搜索”即可.在这个例子中.我们知道组件名称即'PRCSDEFN',我们 ...
- 2.postman安装及使用
一.postman说明 postman是研发和测试进行接口调试的工具.可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 二.postman安装 ①作为谷歌浏览器插件安装 参考资料: ...
- vue font-icon 图标
1.vue 游览器左上角小图标 把.ico文件放在根目录下的static文件夹下,然后link标签引入 <link rel="shortcut icon" href=&quo ...
- vue图片上传到七牛云
代码: <template> <div class="upload-info"> <div> <el-upload class=" ...
- Bootstrap 常用属性
一,关于按钮 btn系列 二.关于div 移动位置 col 系列 col-md 系列 col-lg系列 这些都是让多个div在当前页面等大小 三.居中系列 1.文本居中 text-center 2.图 ...
- Nginx如何对日志文件进行配置?
在我们日常工作开发中,对调试bug最重要的手段就是查看日志和断点调试了. 今天我们来说日志文件,Nginx的日志文件一般保存的是访问日志和错误日志. 1. 用来log_format指令设置日志格式 l ...
- ubuntu18.04新体验
虽然ubuntu18.04LST版本早出来了,但自己原来的ubuntu16.04还可以用,就懒得折腾了. 但最近ubuntu崩了,就想尝尝鲜...结果发现还挺好用的,准确地说,ubuntu是越来越好用 ...
- sql server xp_cmdshell 过程中报错原因
1.net use 连接目标服务器是报错: 发生系统错误 53.找不到网络路径 可能原因是:主机装防护软件 比如 360 金山毒霸等阻止了cmd.exe程序. 将cmd.exe权限改成管理员(属性&g ...
- SSIS - 11.For循环容器
一.For循环容器中的3个循环变量 For循环容器,类似于编程语言中的For,用于重复执行容器内的任务,直到条件返回为False.与编程语言类似,For循环容器也需要定义以下3种循环属性: 注: 必须 ...
- Android 音视频开发(三):使用 AudioTrack 播放PCM音频
一.AudioTrack 基本使用 AudioTrack 类可以完成Android平台上音频数据的输出任务.AudioTrack有两种数据加载模式(MODE_STREAM和MODE_STATIC),对 ...