使用 BrowserRouter 对路由更改进行调度操作答案

【问题标题】：Dispatch action on route change with BrowserRouter使用 BrowserRouter 对路由更改进行调度操作
【发布时间】：2020-05-08 03:22:29
【问题描述】：

每当我的应用程序发生路由更改时，我都需要调度一个 Redux 操作。不幸的是，these answers 不适用于我的情况，因为我必须使用BrowserRouter 而不是Router，而BrowserRouter 不采用history 属性。还有其他方法可以做到这一点吗？我正在使用 V4。

【问题讨论】：

您可以使用withRouter 创建一个组件并观察道具的变化。当这些道具发生变化时，事件就会消失。你都尝试了些什么？这是一个基本的方法。这假设您可以使用来自 redux 的钩子。如果可以的话，我建议您也升级您的路由器，以便您也可以使用该软件包中的挂钩。 codesandbox.io/s/condescending-knuth-oyz07

标签： reactjs redux react-router react-router-v4

【解决方案1】：

您可以在每个反应类中使用 componentwillunmount，它会正常工作

【讨论】：

【解决方案2】：

Dennis 的评论给出了一个可行的解决方案，使用 React 钩子。新建一个组件如下：

const RouteChange = withRouter(({ location }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch({ type: "AN_ACTION" });
  }, [dispatch, location.pathname]);

  return null;
});

只需将其包含在应用程序的根目录中即可。每当路由发生变化时，都会调度指定的操作。

【讨论】：