React Router

前提条件

开始之前，请确保你已配置：

• Tailwind CSS 4
• Fumadocs MDX（按照 Vite 设置指南）
• 已创建 lib/source.ts 等必要文件

安装

npm i fumadocs-core fumadocs-ui

样式配置

在 Tailwind CSS 配置文件（app/app.css）中添加 Fumadocs 样式表：

@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';

路由配置

更新 routes.ts 以包含文档和搜索路由：

• 首页的 Index 路由
• 指向 routes/docs.tsx 的 docs/* 通配路由
• api/search 的搜索 API 路由

必需文件

需要创建四个关键文件：

1. MDX 组件（app/components/mdx.tsx）— 导出默认 MDX 组件
2. 布局配置（app/lib/layout.shared.tsx）— 定义基础布局选项
3. 文档路由（app/routes/docs.tsx）— 处理页面渲染和加载逻辑
4. 搜索路由（app/routes/search.ts）— 创建搜索功能服务

根布局包装

在根布局文件中使用 fumadocs-ui/provider/react-router 的 RootProvider 包裹你的应用，以在整个应用中启用 Fumadocs 功能。

内容创建

在 content/docs 目录中使用带有 frontmatter（title、description）的 MDX 文件开始编写文档。