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驱动的分页功能，同时支持浏览器前进/后退导航和直接链接访问。