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. 201771010126 王燕《面向对象程序设计(java)》第十八周学习总结

    实验十八  总复习 实验时间 2018-12-30 1.实验目的与要求 (1) 综合掌握java基本程序结构: (2) 综合掌握java面向对象程序设计特点: (3) 综合掌握java GUI 程序设 ...

  2. spark streaming中维护kafka偏移量到外部介质

    spark streaming中维护kafka偏移量到外部介质 以kafka偏移量维护到redis为例. redis存储格式 使用的数据结构为string,其中key为topic:partition, ...

  3. Java_接口与抽象类

    接口: 接口,英文interface,在java中,泛指供别人调用的方法或函数.接口是对行为的一种抽象. 语法: [public] interface InterfaceName{} 注意: 1)接口 ...

  4. 压力测试工具 ab

    ab 是Apache 自带的一个压力测试工具,命令行,是 ApacheBench 命令的缩写. ab的原理:ab命令会创建多个并发访问线程,模拟多个访问者同时对某一URL地址进行访问.它的测试目标是基 ...

  5. mysql根据字符截取字符串(总结)

    mysql根据字符截取字符串(总结) 1.1 前言   为结合自己平常查资料的习惯,我会先给出例子,然后再对相关知识进行详解.该案例使用到的函数为:SUBSTRING_INDEX 1.2 需要实现的实 ...

  6. Linux入门总结——虚拟机安装配置以及vim简单操作

    安装配置ubuntu 安装准备 vittualbox-5.2.22版本(win10) ubuntu-12.04 安装VirtualBox 1.双击VirtualBox-5.2.2-119230-Win ...

  7. MongoDB 错误汇总

    错误1. ERROR: child process failed, exited with error number 100 可能原因: 1.没有正确关闭服务 2.服务已经启动 3.conf文件的参数 ...

  8. [Swift]LeetCode203. 移除链表元素 | Remove Linked List Elements

    Remove all elements from a linked list of integers that have value val. Example: Input: 1->2-> ...

  9. [Swift]LeetCode212. 单词搜索 II | Word Search II

    Given a 2D board and a list of words from the dictionary, find all words in the board. Each word mus ...

  10. [Swift]LeetCode504. 七进制数 | Base 7

    Given an integer, return its base 7 string representation. Example 1: Input: 100 Output: "202&q ...