react动态路由实现分页
动态路由实现分页的核心逻辑
在React中，可以通过路由参数（如/page/:pageNum）动态匹配分页页码，结合数据请求实现分页功能。以下是关键实现步骤：
配置动态路由
使用react-router-dom定义动态路由参数，例如将页码作为URL的一部分：
// 在路由配置中
<Route path="/list/:pageNum" component={ListPage} />组件内获取路由参数
通过useParams钩子获取当前页码，并转换为数字类型：
import { useParams } from 'react-router-dom';
function ListPage() {
const { pageNum } = useParams();
const currentPage = parseInt(pageNum) || 1; // 默认第一页
}发起分页数据请求
根据路由参数发起API请求，通常需要传递page和pageSize参数：
useEffect(() => {
const fetchData = async () => {
const response = await fetch(`/api/data?page=${currentPage}&size=10`);
const data = await response.json();
// 更新状态...
};
fetchData();
}, [currentPage]); // 依赖路由参数变化分页控件与路由跳转
分页按钮需使用Link或history.push更新URL，而非直接修改状态：
import { Link } from 'react-router-dom';
// 分页按钮示例
<Link to={`/list/${currentPage + 1}`}>下一页</Link>边缘情况处理
- 页码有效性校验：在路由加载时检查页码是否超出范围，例如重定向到第一页：
if (currentPage > totalPages) { return <Redirect to="/list/1" />; } - URL同步：确保用户手动修改URL时能正确显示对应页码的数据。
可选优化
- 路由懒加载：结合
React.lazy和Suspense实现分页路由的按需加载。 - URL查询参数：若需保留其他参数（如筛选条件），可使用
useLocation处理：const location = useLocation(); // 合并参数示例 <Link to={`${location.pathname}?filter=value&page=2`}>
通过以上方法，可实现URL驱动的分页功能，同时支持浏览器前进/后退导航和直接链接访问。
