React 监听路由变化笔记

最近项目遇到了一个需求，要求在执行完特定操作并跳转到某特定页面后，更新公共头部组件的一个展示的变量。但是头部组件和当前容器页面是分开的两个独立项目，头部组件是远程组件项目，而容器页面是另外一个项目，这样就得跨项目去通知头部组件做更新了。

想了一下，之前遇到的 react 或 vue 项目都是同一项目内做全局通知，比如可以用 redux、vuex 做全局状态管理，或者 context，这些去实现。另外，由于项目没有接入 websocket 实时通讯，我也不打算直接做定时器轮询，那么要通知到另外项目的组件应该怎么办呢？感觉可以在当前页面定义一个自定义的 window 全局变量，或者定义一个 localstorage 变量并在头部组件观察，但是稍加尝试后发现在这种情况下不太好用，也稍微有点麻烦。

仔细考虑过当前的应用场景后，我是需要在当前某些页面执行完一些特定操作后去到一个结果页面，并且在结果页面刷新头部组件的展示值，那么我只需要监听当前路由是否在这个结果页面时再去做头部组件的更新就可以了，于是我打算用 react-router-dom 的 useLocation 方法。可当我兴冲冲地在 useEffect 里面写好了 useLocation 的观察后，本地试了下没问题，但是打包上线后项目直接白屏了，头疼不已。

这时我突然想到 window 变量里不就有 location 吗，完全可以用 window.location 来实现我需要的功能啊！这个 window.location 会返回一个对象，包含 pathname 和 href 等属性。但是这里注意，只监听 window.location 是不够的，要监听到再往下一层，也就是 window.location.pathname 或者window.location.href 才能正确且及时地监听到。window.location.href 的话会返回当前完整的 url，包括我们的 url 里面的每一个参数，这对于需要实时监听 url 参数变化是很有用的。但是我的情况监听window.location.pathname 就够了，也就是除去域名后的路径就可以了，从而达到在特定页面路径时执行特定操作的功能。如下所示

useEffect(() => {
    //当url路径在xxx路径下时
  if (window.location.pathname?.includes('xxx')) {
    //执行特定操作
  }
}, [window.location.pathname]);

最后成功实现需求啦，撒花~

那么对于 React 监听路由及参数变化的简单实现笔记就分享到这里啦，希望大家觉得有点小用吧。