反应路由器，history.push 运行后的代码？答案

【问题标题】：React router, codes after history.push run?反应路由器，history.push 运行后的代码？
【发布时间】：2020-09-02 21:50:50
【问题描述】：

说说你的 clickHandler

你会的

// url change will cause this component to be dismounted and a new component will mount
history.push(url)

// do some more work 
dispatch(someMoreWork())

push 调用后代码会发生什么变化？代码是否保证运行？

【问题讨论】：

我认为它不会运行，因为组件将被卸载
我认为它会起作用，因为javascript是同步语言，不能忽略一些代码。但结果可能出乎意料，例如您可能会收到“您正在尝试更新未安装组件的状态”之类的错误。如果您不想出现意外行为，则无需在应用程序中使用此模式

标签： reactjs react-native react-router

【解决方案1】：

只有在 javascript 中的事件队列中的同步操作被执行后才会完成历史导航。

在您的情况下，javascript 将执行您调用 history.push 的函数中的所有内容，然后导航到新 Route，这将是一种可预测的行为

您可以通过执行调度操作然后访问渲染组件中的值来简单地验证上述内容。

Check this demo 通过在 history.push 之后调度一个动作并访问渲染路由中的结果 redux 状态来演示上述行为

【讨论】：