Add D1 and React Router example

[Oxyjun]

Summary

• Add new example for querying D1 from a React Router v7 application
• Replaces the deprecated Remix pattern with the recommended React Router approach
• Includes setup instructions, route example, and type safety configuration

This is the React Router equivalent of the existing D1 and Remix example, following the recommendation that new projects use React Router instead of Remix.

[github-actions]

This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:

Pattern	Owners
/src/content/docs/d1/	@elithrar, @rozenmd, @vy-ton, @joshthoward, @oxyjun, @harshil1712, @cloudflare/pcx-technical-writing
/src/schemas/tags.ts	@cloudflare/content-engineering, @kodster28

[elithrar]

/bonk review Jun's code. is it correct? ensure it is valid TypeScript. is it beginner friendly?

Remove the "CloudflareEnviroment" and show how to use wrangler types to generate types.

[ask-bonk]

Summary of Review and Changes

Issues found in Jun's code

#	Issue	Severity	Fixed
1	CloudflareEnvironment pattern is wrong — The manual declare global { interface CloudflareEnvironment { DB: D1Database } } approach doesn't match the official React Router Cloudflare template, which uses wrangler types to auto-generate an Env interface	Critical	Yes
2	useLoaderData mentioned but never used — Intro text references "the useLoaderData hook" but the code uses React Router v7's typesafe Route.ComponentProps pattern with loaderData as a prop	Minor	Yes
3	Inconsistent loader return type — The loader returns { users: results } on success but { users: [], error: string } on failure. Destructuring error from loaderData would cause a TypeScript error since error doesn't exist on the success branch	TypeScript error	Yes
4	workers/app.ts code used wrong type — ExportedHandler<CloudflareEnvironment> doesn't match the template which uses ExportedHandler<Env> with auto-generated types	Correctness	Yes (section rewritten)

Changes made

1. Removed useLoaderData reference from the intro paragraph (d1-and-react-router.mdx:14)

2. Simplified the route example — Removed the try/catch with inconsistent return types. The example now returns { users: results } directly, and the component accesses loaderData.users without destructuring an error property that may not exist. This is cleaner and avoids the TypeScript union type issue.

3. Replaced "Add type safety" section with "Generate types" — Instead of showing users how to manually write a CloudflareEnvironment interface in workers/app.ts, the new section:

   • Explains the cf-typegen npm script that already exists in the template
   • Shows how to run npm run cf-typegen to generate types
   • Shows what the generated worker-configuration.d.ts looks like
   • Includes a :::note reminder to re-run the command when bindings change
   • This matches how the official React Router Cloudflare template actually works

github run

[elithrar]

/bonk fix the build issues

[ask-bonk]

Summary

The build failure was caused by React Router not being in the allowed tags list (src/schemas/tags.ts). The frontmatter in d1-and-react-router.mdx uses tags: ["React Router"], but the tag validation middleware rejects any tag not in the allowlist.

Fix: Added { label: "React Router", variants: ["react-router"] } to the frameworks array in src/schemas/tags.ts:22, alphabetically between "Nuxt" and "Remix".

Note: The previous CI failure log also showed an Object.groupBy is not a function error, but that's a pre-existing issue caused by the CI runner using Node.js 20 while the project requires Node.js >= 22 (per .node-version and package.json engines). That's not related to this PR.

github run

[github-actions]

Preview URL: https://fd667406.preview.developers.cloudflare.com
Preview Branch URL: https://jun-d1-react-router-example.preview.developers.cloudflare.com

Files with changes (up to 15)

Original Link	Updated Link
https://developers.cloudflare.com/d1/examples/d1-and-react-router/	https://jun-d1-react-router-example.preview.developers.cloudflare.com/d1/examples/d1-and-react-router/