Umi: Location 和 useLocation的query 缺少 ts 声明类型

[xiexingen]

如图

What happens?

最小可复现仓库

请使用 yarn create @umijs/umi-app 创建，并上传到你的 GitHub 仓库

复现步骤，错误日志以及相关配置

相关环境信息

• Umi 版本：
• Node 版本：
• 操作系统：

[xiaohuoni]

看了一下代码，应该是已经修复了。https://github.com/umijs/umi/commit/94f47a9039889244a95119056751d5bd1422d37c
你可以更新一下你的umi版本

[xiexingen]

奇怪了
"@umijs/preset-react": "^1.6.6",
"umi": "^3.2.20"

[xiaohuoni]

@xiexingen 给个例子看下

[leftstick]

@xiaohuoni @xiexingen 之前那个修复只对 page component 的 props 里的location 有效。

直接用 useLocation ，或者 history.location 得到的对象，仍然没有 query 定义。

之前我印象 @sorrycc 似乎提过这个地方有潜在问题，所以一直没修复。不确定那个疑问现在是否依旧存在。但query 定义应该确实还没有加

[xiaohuoni]

https://github.com/umijs/umi/issues/4268#issuecomment-616908652

[alvin0216]

const location = useLocation()
location.query // 类型“Location”上不存在属性“query”。

实际上是有的 ，但是类型声明就没有，请问各位如何解决的 ^3.3.2
@xiexingen

[xiexingen]

const location = useLocation()
location.query // 类型“Location”上不存在属性“query”。

实际上是有的 ，但是类型声明就没有，请问各位如何解决的 ^3.3.2
@xiexingen

官方暂时还没处理，改动比较大；我目前是用location['query']这种形式来暂时解决的

[alvin0216]

const location = useLocation()
location.query // 类型“Location”上不存在属性“query”。

实际上是有的 ，但是类型声明就没有，请问各位如何解决的 ^3.3.2
@xiexingen

官方暂时还没处理，改动比较大；我目前是用location['query']这种形式来暂时解决的

谢回，我是通过 react-router query-paramters 去解决的

代码：

export default function useSearchParams(): URLSearchParams {
  return new URLSearchParams(useLocation().search);
}

[sorrycc]

It's inactive above 3 months, feel free to reopen if still have problems.

[mastercbhw]

This problem still exists

[LiuJinYang9527]

该问题仍然存在

[lhzbxx]

这个问题没有计划解决吗？

[varfate]

我是重新定义了一次

• use-real-location.ts

import * as H from 'history';
import { parse, ParsedQuery } from 'query-string';
import { useLocation } from 'umi';

const useRealLocation = <Q extends ParsedQuery<string>>() => {
  const location = useLocation<undefined>() as H.Location<undefined> & { query: Q };
  const query = location.query || parse(location.search);

  return { ...location, query };
};

export default useRealLocation;

[lhzbxx]

我是重新定义了一次

• use-real-location.ts

import * as H from 'history';
import { parse, ParsedQuery } from 'query-string';
import { useLocation } from 'umi';

const useRealLocation = <Q extends ParsedQuery<string>>() => {
  const location = useLocation<undefined>() as H.Location<undefined> & { query: Q };
  const query = location.query || parse(location.search);

  return { ...location, query };
};

export default useRealLocation;

我目前是直接用了 @ahooksjs/use-url-state。