【Antd】Pagination中的current和pageSize参数自动同步到url当中

一颗不甘坠落的流星

已于 2023-04-10 12:04:46 修改

阅读量3.2k

点赞数 2

分类专栏：编码报错及解决方法文章标签： adtd current pageSize

于 2021-09-03 09:50:23 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/120074734

版权

编码报错及解决方法专栏收录该内容

24 篇文章

订阅专栏

本文主要讨论在使用React Router时遇到的一个问题，即URL参数在跳转后出现错误。当尝试通过<Link>组件和<Routepath>导航到/table/regulate页面时，URL中包含了不必要的query参数(current=1&pageSize=5)。问题在于即使删除pagination配置，ProTable仍然会传递默认参数。解决方案是设置ProTable的syncToUrl属性为false，阻止参数同步到URL。应用此修改后，URL得以正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- 报错信息
- 解决方法

报错信息

报错url：

https://test.dev.com:3000/current=1&pageSize=5#table/regulate

相关代码片段：

<Router>
	<Link to={"/table/regulate"}  >表管理</Link>
	<Route path={"/table/regulate"}  exact={true} component={TableRequlate} />
</Router>

// 只展示了关键代码片段，无关代码已删除
const TableRequlate:React.FC<any> = () => {
    const content =  (
        <ProTable<GithubIssueItem>
        columns={columns}
        pagination={{
            pageSize: 5,
        }}
        // 把 pagination 删除也没用，他会传默认参数：current=1&pageSize=20
        form={{
			// 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
            syncToUrl: (values, type) => {
            if (type === 'get') {
                return {
                ...values,
                created_at: [values.startTime, values.endTime],
                };
            }
            return values;
            },
        }}       
        />
    );
    
    return content
}
export default BuildTableRequlate

解决方法

官方说明：
具体实现：把syncToUrl配置为false

// 只展示了关键代码片段，无关代码已删除
const TableRequlate:React.FC<any> = () => {
    const content =  (
        <ProTable<GithubIssueItem>
        columns={columns}
        pagination={{
            pageSize: 5,
        }}
        // 把 pagination 删除也没用，他会传默认参数：current=1&pageSize=20
        form={{
			// 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
            syncToUrl: false,
        }}       
        />
    );
    
    return content
}
export default TableRequlate

结果：

https://test.dev.com:3000/current=1&pageSize=5#table/regulate