有没有一种方法可以将Next.js Link与MUI的Pagination组件一起使用？

m1m5dgzv 于 2023-10-18 发布在其他

关注(0)|答案(1)|浏览(108)

我在我的项目中使用Next.js和MUI设计系统。在其中一个组件中，我使用了一个具有多个页面的表，并使用MUI中的Pagination组件查看表中的不同页面。目前我使用a标记，但我希望能够使用Next.JS的链接组件代替。
这就是我的工作代码看起来的样子：

<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 https://nextjs.org/docs/messages/link-multiple-children Open your browser's console to view the Component stack trace.
所以问题似乎是MUI分页组件在Link中适合两个孩子，尽管Link标记只允许一个。它在控制台中看起来像这样（当使用a标记时）：

<a
  class='MuiButtonBase-root MuiPaginationItem-root MuiPaginationItem-sizeSmall MuiPaginationItem-text MuiPaginationItem-circular MuiPaginationItem-textPrimary MuiPaginationItem-page css-1vj5it5-MuiButtonBase-root-MuiPaginationItem-root'
  tabindex='0'
  href='/tunes?page=3'
  aria-label='Go to page 3'
>
  3
  <span class='MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root'></span>
</a>

有没有一种方法可以将合并Next.js的Link组件与MUI的Pagination组件结合起来？也许用某种方法把里面的东西包起来，或者让 linq 在里面接受不止一个孩子？

next.js

来源：https://stackoverflow.com/questions/75390831/is-there-a-way-to-use-a-next-js-link-together-with-muis-pagination-component

1条答案

按热度按时间

6ovsh4lw1#

您应该将PaginationItem Package 在Link组件中，而不是相反。
你可以这样做：

<Pagination
  count={count}
  page={Number(page)}
  renderItem={(item) => (
    <Link href={`/tunes${item.page === 1 ? '' : `?page=${item.page}`}`}>
      <PaginationItem {...item} />
    </Link>
  )}
/>

赞(0）回复(0）举报 2023-10-18

我来回答

有没有一种方法可以将Next.js Link与MUI的Pagination组件一起使用？

1条答案

相关问题

热门标签

最新问答