如何将Next.js Link组件与MUI Pagination组件结合使用？

问题背景 #

在Next.js项目中使用MUI的Pagination组件时，尝试将PaginationItem的component从原生<a>标签替换为Next.js的Link组件，代码如下：

原有可用代码：

<PaginationItem
  component={'a'}
  href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}
  {...item}
/>

替换后的代码：

<PaginationItem
  component={Link}
  href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}
  {...item}
/>

执行后出现错误：

Error: Multiple children were passed to <Link> with 'href' of '/tunes?page=0' but only one child is supported

原因是MUI的PaginationItem会向传入的component传递两个子元素（页码文本和TouchRipple波纹元素），而Next.js的Link组件仅支持单个子元素。

解决方案 #

方法1：自定义Link包装组件 #

创建一个中间组件，将PaginationItem的多个子元素包裹在单个容器内，再传递给Next.js Link：

import Link from 'next/link';

// 自定义包装组件
const LinkWrapper = ({ href, children, ...props }) => {
  return (
    <Link href={href} {...props}>
      {/* 用span包裹所有子元素，作为Link的单个子节点 */}
      <span>{children}</span>
    </Link>
  );
};

// 使用方式
<PaginationItem
  component={LinkWrapper}
  href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}
  {...item}
/>

方法2：通过Pagination的renderItem自定义渲染 #

直接在Pagination的renderItem属性中自定义每个分页项的结构，确保Link只接收单个子元素：

import Link from 'next/link';
import { Pagination, PaginationItem } from '@mui/material';

// 在Pagination组件中使用
<Pagination
  count={10} // 替换为实际总页数
  renderItem={(item) => (
    <PaginationItem
      {...item}
      component={() => (
        <Link href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}>
          <span>{item.children}</span>
        </Link>
      )}
    />
  )}
/>

说明 #

两种方法核心逻辑一致：将PaginationItem传递的多个子元素合并到单个容器（如<span>或<div>）中，满足Next.js Link对单个子元素的要求。若使用Next.js 13+的App Router，Link组件用法略有差异，但核心思路依然适用。

内容的提问来源于stack exchange，提问作者Hedvig