react-router-dom 5.3.0打开无路由变更模态框报pathname未定义错误

错误原因 #

这是react-router-dom v5.3.0版本的官方已知缺陷，该版本对内部路由匹配逻辑的调整存在疏漏，在无路由变更的场景下（比如模态框弹出、局部组件挂载），部分关联路由上下文的逻辑会意外触发校验，但没有正确传入location对象，最终导致读取pathname属性失败报错。

可行解决方案 #

• 方案1：锁定版本到5.2.0
  在package.json中将react-router-dom的依赖声明修改为"react-router-dom": "5.2.0"，删除node_modules、package-lock.json（或yarn.lock）后重新执行安装命令即可，该方案兼容性最稳定。
• 方案2：升级到5.3系列的修复版本
  官方已在v5.3.4及后续的5.x小版本中修复了该缺陷，可直接将依赖升级到"react-router-dom": "^5.3.4"即可解决问题。
• 方案3：固定传入location对象（仅适用于必须停留在v5.3.0的场景）
  给所有用到useLocation、useRouteMatch等路由hooks，或用到路由匹配逻辑的组件，手动传入上层Router上下文的location对象，也可以用withRouter高阶组件包裹对应组件，确保location对象不会为空。

内容的提问来源于stack exchange，提问作者docgecko