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. 关于在centos7 64为引用android so引发的问题修复

    背景: 公司有解码的app,解码库位c++编写so动态库. 之前做过一版在调用html5摄像头,然后提取图像进行解码,后面因为图像质量不佳放弃. 最近 因为小程序api有更新 可以获取到相对清晰的图像 ...

  2. [bzoj1088]扫雷

    额,这种水题我也不说什么了233 Description 相信大家都玩过扫雷的游戏.那是在一个n*m的矩阵里面有一些雷,要你根据一些信息找出雷来.万圣节到了,“余”人国流行起了一种简单的扫雷游戏,这个 ...

  3. MangoDb的安装及使用

    安装步骤 一.创建文件 vi /etc/yum.repos.d/mongodb-org-3.6.repo 二.配置文件内容 [mongodb-org-3.6] name=MongoDB Reposit ...

  4. win10常用快捷键

    记住Win10一些常用的快捷键,在使用电脑的过程中,可以快速的切换不同的功能窗口,减少鼠标的操作.大大提高工作效率.来看看下面这些常用的. Win键+Tab:激活任务视图 Win键+A:激活操作中心 ...

  5. sqlite3数据库教程

    1.sqlite3安装(命令行): sudo apt-get install sqlite3 2.图形界面查看工具安装: sudo apt-get install sqlitebrowser 3.命令 ...

  6. [Swift]LeetCode241. 为运算表达式设计优先级 | Different Ways to Add Parentheses

    Given a string of numbers and operators, return all possible results from computing all the differen ...

  7. [Swift]LeetCode1019. 链表中的下一个更大节点 | Next Greater Node In Linked List

    We are given a linked list with head as the first node.  Let's number the nodes in the list: node_1, ...

  8. 关于datagrid中控件利用js调用后台方法事件的问题

    前台调用后台方法除了用button的click事件,还可以用js调用  一.前台页面如图 需求点击这个按钮触发后台事件,从而能够调用存储过程 <epoint:HyperLinkColumn He ...

  9. git push 时提示用户名或密码相关错误信息

    这里讲的是一个常见的第一次push提示输入用户名密码时,输入错误的解决办法.它导致在后面其他项目什么的在push的时候一直失败,并提示有用户名密码错误信息. 第一步:进入到“控制面板” (这里如何进入 ...

  10. .NET Core实战项目之CMS 第十六章 用户登录及验证码功能实现

    前面为了方便我们只是简单实现了基本业务功能的增删改查,但是登录功能还没有实现,而登录又是系统所必须的,得益于 ASP.NET Core的可扩展性因此我们很容易实现我们的登录功能.今天我将带着大家一起来 ...