close

PrevNextPage

Warning

该组件主要配合 自定义主题 中的 wrap/eject 使用 ,与 MDX 里直接导入使用的组件不同,你可以通过传递组件 props 或直接覆盖该组件达到修改样式和功能的目的。如果通过 eject 覆盖整个组件,需注意组件对应配置项的读取会失效,需要自行控制。

PrevNextPage 渲染页面底部的上一页/下一页导航链接。

用法

该组件不接受任何 props,会自动根据侧边栏顺序计算上一页/下一页链接。

工作原理

组件内部使用 usePrevNextPage hook 来获取上一页和下一页的信息:

import { usePrevNextPage } from '@rspress/core/theme';

const { prevPage, nextPage } = usePrevNextPage();
// prevPage: { text: string; link: string } | null
// nextPage: { text: string; link: string } | null
  • 上一页/下一页根据当前页面在侧边栏中的位置自动计算
  • 如果当前页是第一页,则 prevPagenull
  • 如果当前页是最后一页,则 nextPagenull