1. HashRouter: 即对应url中的hash值,如xx.com/#/a、xx.com/#/a/b, 服务器对任务url都返回同一个url,具体的路径由浏览器区分,因为浏览器不会发送hash后面的值给服务器。
  2. BrowserRouter:如果是BrowseRouter即url变成这样,xx.com/a、xx.com/a/b, 所以要对服务器配置不同的url返回不同的资源。
  3. MemoryRouter: 就是没有URL的情况,比如(React Native)。

**react-router的哲学**
https://github.com/rccoder/blog/issues/29
  1. 动态路由,每一个route都是一个组件,更好的配合React
  2. 路由嵌套

**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杂记的更多相关文章

  1. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  2. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  3. [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 ...

  4. [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 ...

  5. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  6. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  7. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  8. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  9. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  10. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

随机推荐

  1. [AtCoder3856]Ice Rink Game - 模拟

    Problem Statement An adult game master and N children are playing a game on an ice rink. The game co ...

  2. typeScript 学习

    最近看了下typescript, 虽然说已经有很多人已经用到它了,但是我还是写写自己的feel咯:这里推荐学习链接 https://ts.xcatliu.com. 这个入门学习,我不好做评价,但是我自 ...

  3. 微信小程序如何发送短信验证码,无需搭建服务器

    自从微信小程序提供云开发支持,开发者无需搭建后台服务器,使用微信提供的核心API就可以实现应用功能,此时就需要小程序能够自己发送短信,比如短信验证码,榛子云短信(http://smsow.zhenzi ...

  4. 解决idea中 mvn项目导了包找不到包的问题

    ----------------------------------------分割线--------------------------------------------------------- ...

  5. 算法与数据结构(十二) 散列(哈希)表的创建与查找(Swift版)

    散列表又称为哈希表(Hash Table), 是为了方便查找而生的数据结构.关于散列的表的解释,我想引用维基百科上的解释,如下所示: 散列表(Hash table,也叫哈希表),是根据键(Key)而直 ...

  6. vux 项目的构建

    一:vux安装 # 安装vuxcnpm install vux --save   # 安装vux-loadercnpm install vux-loader --save-dev   # 安装less ...

  7. input type=passoord 密码框的明密文(显示和隐藏) 显示

    最近在写一个新的项目,从头开始写,所以就要从注册登录开始做起.以前写登录注册模块的时候,无外乎给input框一个type=”password”就可以了,近期因为要涉及到显示隐藏状态的切换. 样式代码如 ...

  8. 【DFS】数独游戏

    DFS(深度优先搜索): 深度优先搜索算法(英语:Depth-First-Search,简称DFS)是一种用于遍历或搜索树或图的算法. 沿着树的深度遍历树的节点,尽可能深的搜索树的分支.当节点v的所在 ...

  9. less环境的安装与搭建

    less: Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充.Less 可以运行在 Node 或浏 ...

  10. linux系统安装cdcfordb2udb

    最近接触到db2数据库实时复制的解决方案InfoSphere CDC(Change Database Capture) .主要是通过读取源端的日志信息对目标端进行数据的增删改,从而尽量减少对源端资源的 ...