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

Posted 2023-02-16

【中文标题】“react-router-dom”中的 useLocation 返回意外对象

【英文标题】：useLocation from 'react-router-dom' returns unexpected object

【发布时间】：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 挂钩返回的位置对象）？

【参考方案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 无关。