close
Rspress
  • 中文

      • PrevNextPage

      Warning

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

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

      用法

      上一页OverviewGroup下一页Root
      import { PrevNextPage as BasicPrevNextPage } from '@rspress/core/theme-original';

export default function PrevNextPage() {
  return <BasicPrevNextPage />;
}

      该组件不接受任何 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
      • 上一页/下一页根据当前页面在侧边栏中的位置自动计算
      • 如果当前页是第一页，则 prevPage 为 null
      • 如果当前页是最后一页，则 nextPage 为 null