React Router Framework Setup

Getting started with Ariadocs in a React Router framework project is simple.

Prerequisites: Complete the Installation & Configuration first.

Define Routes

Inside app/routes.ts:

// app/routes.ts
import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
  index("app/routes/home.tsx"),
  route("docs/*", "app/routes/docs.tsx"),
] satisfies RouteConfig;

Create Docs Route

Catch all docs pages inside app/routes/docs.tsx:

// app/routes/docs.tsx
import { useLoaderData } from "react-router";
import { MdxClient } from "@ariadocs/react/client";
import type { Route } from "./+types/docs";
import { docs } from "../ariadocs";

export async function loader({ params }: Route.LoaderArgs) {
  const slug = params["*"];
  return docs.serialize({ slug });
}

export default function Docs() {
  const { serialized, frontmatter } = useLoaderData<typeof loader>();
  return (
    <section>
      <title>{frontmatter.title}</title>
      <MdxClient serialized={serialized} />
    </section>
  );
}

Pre-render Docs

Add react-router.config.ts to prerender all docs:

// react-router.config.ts
import type { Config } from "@react-router/dev/config";
import { docs } from "./app/ariadocs";

export default {
  ssr: true,
  async prerender() {
    const raw = await docs.pagePaths();
    return raw.map((slug) => `/docs/${slug}`);
  },
} satisfies Config;

Create Your First Doc

contents/docs/hello-world.mdx

---
title: Hello World
---

# Hello World

This is your **first Ariadocs page**.

Run the App

pnpm dev

Open http://localhost:5173/docs/hello-world