react-router、react-redux、antd（Layout）

react-router（react-router-dom）文档链接

文档中的简介：React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

在我看来（我是做iOS开发的），这就像是 iOS 里面呢的 UITabbarController 和 UINavigattionController 的结合一样，控制着各个 ViewController 的跳转；不同的是react-router可以控制Route所在的位置，而iOS已经固定状态栏、导航栏、tabbar位置、高度，只能控制其隐藏和显示。

react-redux 文档链接

文档中介绍：Redux 是 JavaScript 状态容器，提供可预测化的状态管理。

我的理解是：此组件是对 model 或 viewModel 进行管理，解放我们对 setState 的操作；同时实在管理的时候可以进行一些中间件（applyMiddleware）操作，如：loggerMiddleware 等。

antd（Ant Design of React）文档链接

一个很丰富的UI组件库。题目中提到的 Layout 是我在开发过程中用到的布局样式。

如果单独只用这些组件中的某一个，根据文档都可以做得很好。但是三者一结合使用，就有一些问题了。

再此我也只记录一下自己遇到的问题。

0、react-router 和 antd （Layout）遇到问题，路由和布局上的问题。

react-router、react-redux、antd（Layout）_第1张图片

原型是这样的布局（上面header，中间content）

我的做法是将 Route 放到 Content 里面，共用 header ，类似于 iOS 里面的 tabbar 一样。在 header 里面添加 Link 标签，控制其切换、跳转。

此时会有一个问题，登录界面，并不要 header 的显示。于似乎，在经过多次尝试（可能并不是最优的），我在 index.js 的外层加了一个 Switch，将 index 放到 Route 里面。此处用 Window 命名是根据 iOS 开发里面的层级命名的，并不是js里面的window。

react-router、react-redux、antd（Layout）_第2张图片

此处的Window就是index.js export的对象

在需要跳转登录界面的时候，this.props.history.replace("login")

跳转下级路由的时候，this.props.history.push("detial")

1、react-router 和 react-redux 遇到的问题，在使用 react-redux 的时候，我选择使用了 connect

react-router、react-redux、antd（Layout）_第3张图片

将state和disoatch转化为了props

这就导致 react-router 的跳转出现了一些问题。this.props.history 为 undefine 。这样的话，就不能跳转了啊。

尝试零：是不是在mapStateToProps方法里面把 history 给传丢了？补充一下，结果并不能解决。

尝试一：在跳转的时候，window.location.href("llogin")，这样是可以实现的，但是每次页面都会刷新，react-router的意义何在？

最终，在 react-router-dom 里面提供了 withRouter，将 withRouter 放到 connect 外面就好了。

import {withRouter} from "react-router-dom";

另外每个页面可能都需要一个 Provider，但是整个项目只能有一个 Router，所以并不能像 redux文档里面那样些写。而应该将 Router 放到 Provider外面（我是这么写的，而且可以用没警报。但不确定是百分之百有道理的）。