如何在Docusaurus侧边栏中添加React页面？

Docusaurus v2完全支持将React页面加入侧边栏，并且可以像Markdown文档一样自定义顺序，以下是几种可行方案：

方案1：直接在侧边栏配置中添加自定义链接 #

适合将独立的React页面（比如放在src/pages下的组件）加入侧边栏：

1. 打开项目根目录下的sidebars.js文件
2. 在目标侧边栏的条目数组中，插入type: 'link'的配置项，指定页面的路由和显示标签，示例：

module.exports = {
  docs: [
    { type: 'doc', id: 'intro' }, // 原有的Markdown文档
    {
      type: 'link',
      label: '我的React工具页面', // 侧边栏显示名称
      href: '/react-tool-page', // React页面的路由路径
    },
    { type: 'doc', id: 'tutorial-basics' }, // 后续的Markdown文档
  ],
};

3. 确保React页面的路由正确：src/pages下的组件会自动生成路由，比如src/pages/ReactToolPage.js对应的路由就是/react-tool-page（文件名转小写，驼峰转短横线）

方案2：用MDX将React组件嵌入文档流 #

如果希望React内容和Markdown文档无缝结合，推荐用MDX：

1. 在docs目录下创建.mdx文件（比如react-integration.mdx）
2. 在MDX文件中导入并渲染你的React组件：

import DataVisualizer from '../src/components/DataVisualizer';

# 数据可视化工具

下面是自定义的React可视化组件：

<DataVisualizer />

3. 在sidebars.js中像普通Markdown文档一样添加这个MDX文件的ID（不带后缀），即可和其他文档一起排序：

module.exports = {
  docs: [
    'intro',
    'react-integration', // MDX文件的ID
    'tutorial-basics',
  ],
};

方案3：自定义动态侧边栏（复杂场景） #

如果需要动态生成侧边栏或更灵活的配置，可以在sidebars.js中使用函数式配置：

module.exports = async function createSidebars() {
  // 这里可以添加动态获取文档或页面的逻辑
  const customPages = [
    {
      type: 'link',
      label: '动态生成的React页面',
      href: '/dynamic-react-page',
    },
  ];

  return {
    docs: [
      'intro',
      ...customPages,
      'tutorial-basics',
    ],
  };
};

注意事项 #

• 侧边栏的顺序完全由sidebars.js中条目数组的顺序决定，和Markdown文档的配置逻辑一致
• 若使用type: 'link'，还可以添加description属性（显示在侧边栏标签下方）或className属性（自定义样式）
• 确认docusaurus.config.js中没有覆盖路由的配置，确保React页面的路由可正常访问

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