connected React Router

前言

最近在使用 Connnected React Router 发现神奇的问题,居然没办法正常控制路由,身为专业的工程师,我们发挥福尔摩斯的精神,抽丝剥茧的找出问题出在哪。

什么是 Connected React Router

如果你使用Redux,那么在 Redux 中使用 Side Effect Handler(像是 Redux Thunk、Redux Observable 或是 Redux Saga)做「流程管理」的时候,那么你一定会有一种情境是

如果你做完某件事,把目前页面跳转到另一个页面

如果你也使用 React Router,那么 Connected React Router 就是帮你在 Redux 的流程中也可以使用 Router 的功能,(像是 push、 goBack … etc 之类的 Api 帮助你管理路由)

也就是说,Connected React Router 是帮助同步「Router」与「Redux」的状态,帮助你可以使用 Redux 管理 React Router 的工具!

举例

如果我们想要在发完对 Server 的更新资料 Api 后,跳转回「首页路由( /home )」,代码大概会像是底下这样:

connected React Router

更多关于 Connected Recact Router 文件请看这里

发生的问题

我的状况是,Web Application 都根据 Connected React Router 官网文件正确修改接上,Component 上的 history.push 可以正常运作,一开始进入页面 Redux 也有听到 @@router/LOCATION_CHANGE 的 Action,但是却没办法使用 push Api 来改变画面上的路由,整个前端程式也没有发生这个 Action,也没有任何错误发生。

小技巧:要如何知道前端程式有听到什么 Action,可以使用 Redux Logger 这个 Middleware,但记得只在开发模式使用就好!

解决方法

由上述问题来看,因为 Web Application 有听到 @@router/LOCATION_CHANGE 的 Action,对于 Connected React Router 修改应该是没有错的,而且没有错误,也能用 history.push 方法,大致上的 Code 应该都没有问题才对。

经过一番思考后,想我有一个习惯是,把 createBrowserHistory 的方法包成 history.js ,会不会是 history 本身有问题?一查果然,我在定义 的 history 与 Redux Store 所使用的 history 居然是不同的档案,所以造成在画面上可以正常运作,Redux Store 的却不能正常运作

结论

Store 跟 Router 必须使用同一个 history 物件,否则会有其中一方不能正常运作,如果以后还有遇到必须要先检查一次才行,记录一下。

-------------本文结束感谢您的阅读-------------

本文标题:connected React Router

文章作者:sanks

发布时间:2020年05月06日 - 10:16

最后更新:2020年07月29日 - 21:43

原始链接:https://www.sanks-blog.com/connected-React-Router/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。