“react-router-dom”中的 useLocation 返回意外对象答案

【问题标题】：useLocation from 'react-router-dom' returns unexpected object“react-router-dom”中的 useLocation 返回意外对象
【发布时间】：2021-12-14 09:44:58
【问题描述】：

注意：我正在尝试使用 yarn 切换到即插即用。

useLocation 是从 'react-router-dom' 包中导入的。

以前（在 pnp 设置之前）以下行：

const location = useLocation()

总是返回具有下一个结构的位置对象（例如）：

{pathname: '/', search: '', hash: '', state: null, key: 'default'}

在当前的 yarn pnp 设置下，build 渲染 app 在第一次渲染时，有一个具有上述结构的位置对象，但是当尝试更改路径时，有一个具有下一个结构的对象（例如）：

{action: 'PUSH', location: {pathname: '/new-path', search: '', hash: '', state: null, key: 'default'}}

为什么会这样，以及如何解决它（总是有一个相同结构的 useLocation 挂钩返回的位置对象）？

【问题讨论】：

标签： reactjs react-router react-router-dom yarnpkg window.location

【解决方案1】：

已解决。

问题是历史包已升级到 v.5.x。同时react-router设置为v.^5.2.1。因此，history v.5 与 react-router v.5 不兼容。

看起来 history v.5.x 是为即将到来的 react-router v.6 准备的。

将历史记录降级到 v.4 解决了该问题。

注意：这个问题与切换到 yarn Plug'n'Play 无关。

【讨论】：