React Router

设置

npm i fumadocs-mdx fumadocs-core @types/mdx

创建配置文件：

source.config.ts

import { defineConfig, defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  dir: 'content/docs',
});

export default defineConfig();

添加 Vite 插件：

vite.config.ts

import { reactRouter } from '@react-router/dev/vite';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import mdx from 'fumadocs-mdx/vite';
import * as MdxConfig from './source.config';

export default defineConfig({
  plugins: [mdx(MdxConfig), tailwindcss(), reactRouter(), tsconfigPaths()],
});

与 Fumadocs 集成

要与 Fumadocs 集成，请创建一个 lib/source.ts 文件：

app/lib/source.ts

import { loader } from 'fumadocs-core/source';
import { create, docs } from '../../source.generated';

export const source = loader({
  source: await create.sourceAsync(docs.doc, docs.meta),
  baseUrl: '/docs',
});

source.generated.ts 文件将在运行开发服务器或生产构建时生成。

完成

配置现已完成。

示例

渲染内容

由于 React Router 目前不支持 RSC，请使用 toClientRenderer() 在浏览器中懒加载 MDX 内容作为组件。

例如：

import type { Route } from './+types/page';
import { source } from '@/lib/source';
import { docs } from '../../source.generated';
import { toClientRenderer } from 'fumadocs-mdx/runtime/vite';

export async function loader({ params }: Route.LoaderArgs) {
  const slugs = params['*'].split('/').filter((v) => v.length > 0);
  const page = source.getPage(slugs);
  if (!page) throw new Response('Not found', { status: 404 });

  return {
    path: page.path,
  };
}

const renderer = toClientRenderer(docs.doc, ({ default: Mdx, frontmatter }) => {
  return (
    <div className="prose">
      <h1>{frontmatter.title}</h1>
      <Mdx />
    </div>
  );
});

export default function Page(props: Route.ComponentProps) {
  const { path } = props.loaderData;
  const Content = renderer[path];

  return <Content />;
}

注意，你可以直接导入 source.generated.ts 文件，它在不使用 loader() 的情况下访问编译后的内容很有用。

import { docs } from './source.generated';
console.log(docs);

设置

与 Fumadocs 集成

完成

示例

渲染内容

On this page