React-Router4.0小结

react-router 还是 react-router-dom？

在 React 的使用中，我们一般要引入两个包，react 和 react-dom，那么 react-router 和react-router-dom 是不是两个都要引用呢？
非也，坑就在这里。他们两个只要引用一个就行了，不同之处就是后者比前者多出了这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就行了

react-router: 实现了路由的核心功能
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

react-router-dom依赖react-router，所以我们使用npm安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装react-router。基于浏览器环境的开发，只需要安装react-router-dom；npm会自动解析react-router-dom包中package.json的依赖并安装。
react-router-dom中package.json依赖:

"dependencies": {
    "history": "^4.7.2",
    "invariant": "^2.2.2",
    "loose-envify": "^1.3.1",
    "prop-types": "^15.5.4",
    "react-router": "^4.2.0",
    "warning": "^3.0.0"
  }

React-Router4.0不允许出现嵌套的子路由

例如：

React-Router4.0主张将路由拆分出来,不直接使用嵌套路由
源文件改为

然后在APP组件里面再次写入

只渲染第一个匹配的组件：一个路由可能同时匹配多个路径，在中，只渲染匹配的第一个，其他的放弃。之前这是Router的默认行为，4.0中不默认了

在react-router 2.0中可选参数是这样写的

而在react-4.0中你会惊喜的发现这种写法没用了

要写成这样

后边的问号表示这个参数是可选的

Router变化

react-router将history分为三类。

hashHistory 老版本浏览器的history
browserHistory h5的history
createMemoryHistory node环境下的history，存储在memory中

4.0之前版本的react-router针对三者分别实现了createHashHistory、createBrowserHistory和create MemoryHistory三个方法来创建三种情况下的history，这里就不讨论他们不同的处理方式了，好奇的可以去了解一下~
到了4.0版本，在react-router-dom中直接将这三种history作了内置，于是我们看到了BrowserRouter、HashRouter、MemoryRouter这三种Router，当然，你依然可以使用React-router中的Router，然后自己通过createHistory来创建history来传入。

Route标签

它最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。
自带三个 render method 和三个 props 。
render methods 分别是：

每种 render method 都有不同的应用场景，同一个应该只使用一种 render method ，大部分情况下你将使用 component 。

props 分别是：

match
location
history

location对象包括：

pathname 同window.location.pathname
search 同window.location.search
state 一个捆绑在这个地址上的object对象
action PUSH, REPLACE, 或者 POP中的一个
key 唯一ID

发现 location.query属性没有了，现在通过 'query-string' 模块进行转换获取
import queryString from 'query-string'
let query=this.query=queryString.parse(location.search);
match 对象包含了如何与 URL 匹配的信息，具有以下属性：

match对象包括：

params: object 路径参数，通过解析 URL 中的动态部分获得键值对
isExact: bool 为 true 时，整个 URL 都需要匹配
path: string 用来匹配的路径模式，用于创建嵌套的
url: string URL 匹配的部分，用于嵌套的

存： this.props.history.push({pathname:"/web/updateStaff/" + text.userId});
读：this.props.match.params.userId

想了解更详细的参数传递，可以参考 https://www.jianshu.com/p/ad8cc02b9e6c

BrowserRouter和HashRouter区别

hashHistory使用 URL 中的 hash（#）部分去创建路由，举例来说，用户访问http://www.example.com/，实际会看到的是http://www.example.com/#/。

当页面刷新的时候，对于BrowserHistory, 浏览器会向后台发送整个URL的请求, 而对于HashHistory, 它只会请求后台的根目录。

browserHistory 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/list/123这样真实的 URL 。
在browserHistory 模式下，URL 是指向真实 URL 的资源路径，当通过真实 URL 访问网站的时候，由于路径是指向服务器的真实路径，但该路径下并没有相关资源，所以用户访问的资源不存在。
当本地使用browserHistory ，因为webpack.config.js中使用 webpack-dev-server 已经做了配置。所以不会出现刷新页面404.

webpackConfig.devServer = {
        contentBase: path.resolve(__dirname, 'build'),
        compress: true, //gzip压缩
        historyApiFallback: true,
    };

但是要想在发版后正常使用，服务器需要进行相关路由配置，参考 (这里):

问题解决

1.使用render加载组件后，组件加载不出来

https://blog.csdn.net/aqtata/article/details/76169974

2.为什么用 this.props.history.push({......})不起作用

用此方法不起作用说明，你直接引用的Router路由，在ReactRouter4.x里Router里面并没有内置history对象，React Router 是建立在 history 之上的。简而言之，一个 history 知道如何去监听浏览器地址栏的变化，并解析这个 URL 转化为 location 对象，然后 router 使用它匹配到路由，最后正确地渲染对应的组件。所以你只能通过createHistory创建的自定义的history对象，并将其传入Router传入来实现路由动态跳转

// HTML5 history, 推荐
import createHistory from 'history/lib/createBrowserHistory'

// Hash history
import createHistory from 'history/lib/createHashHistory'

// 内存 history （如：node环境）
import createHistory from 'history/lib/createMemoryHistory'
const history = createHistory()
......

history 一个管理js应用session会话历史的js库。它将不同环境（浏览器，node...）的变量统一成了一个简易的API来管理历史堆栈、导航、确认跳转、以及sessions间的持续状态。

3.为什么使用IndexRoute会报错

因为react-router4*已经抛弃了IndexRoute
以前

现在的默认路由为