ant-design / ant-design/pro-components

🐛[BUG]使用hash路由配合Protable的syncToUrl参数时,searchParams参数始终保留的问题

Open
#8,649 5 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述
`syncToUrl`是`ProTable`中用来将查询参数和url进行同步的一个选项配置,当我的项目使用hash路由时,在不同页面进行导航进行切换时,它会始终保留上一个页面的`searchParams`。


### 📷 复现步骤

```js
syncToUrl: (values, type) => {
if (type === 'get') {
return values;
}
return values;
}
```
页面进行导航时,我使用的是react-router-dom的`Link`以及`useNavigate()`

当我使用了syncToUrl选项后,那么url `test.com/#/home` 会变成 -> `test.com/?current=1&pageSize=10#/home`,你会发现查询参数在hash之前。我去查看`syncToUrl`的实现代码,这是因为`syncToUrl`使用了标准的URL api在修改searchParams,[@umijs/use-paramsa源码地址](https://github.com/rudyhuynh/use-url-search-params/blob/main/src/useUrlSearchParams.ts#L7),URL的标准格式,查询参数是在hash之前的。

随后我进行页面导航 `text` 页面会从`test.com/?current=1&pageSize=10#/home`变为 `test.com/?current=1&pageSize=10#/about`,**你会发现只有hash的位置变了,searchParams没有发生变化**,依旧保留着原来的位置。

另一个问题是当url是`test.com/?current=1&pageSize=10#/home`这种格式时,我使用 `react-router-dom`提供的 `useSearchParams()`是获取不到searchParams的,看起来react-router官方团队也只有把查询参数放在url尾部才取得到的,[回答链接](https://github.com/remix-run/react-router/issues/9027#issuecomment-1172318628)

我查了一下之前的issue,好像这个问题是已知的,不过一直未处理,只是推荐开发者使用history路由,我的想法是,既然ProComponent是基于react和react-router-dom的,那么可以试着处理一下这个问题。

### 🏞 期望结果

我期望`syncToUrl`在hash路由模式下可以让url变成`test.com/#/home?current=1&pageSize=10`,从而让页面导航时,将上一个页面的`searchParams`清空,且让 `react-router-dom`的 `useSearchParams()`可以获取到url上面的查询参数


### © 版本信息

- ProComponents 版本: [2.7.15]
- umi 版本
- 浏览器环境 Google Chrome 版本 129.0.6643.2(正式版本)dev (arm64)
- 开发环境 [mac OS]

Contributor guide

Open the contributing guide

Research direction

Start at ProTable's syncToUrl implementation and the URL handling referenced through @umijs/use-paramsa. Reproduce the issue with hash routing, Link, and useNavigate, then verify that navigation moves query parameters after the hash, clears the previous page's parameters, and makes them available through react-router-dom's useSearchParams().

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.