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)遇到问题,路由和布局上的问题。

原型是这样的布局(上面header,中间content)

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

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

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

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

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

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

将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外面(我是这么写的,而且可以用没警报。但不确定是百分之百有道理的)。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容