react-router.md

outline	deep

React Router v7

Add voidPlugin() alongside the React Router v7 Vite plugin to use Void's database, storage, and deployment features. You don't need a separate Cloudflare adapter.

Setup

1. Create a new project

npm create react-router@latest my-app
cd my-app

2. Install dependencies

npm install -D void

3. Configure vite.config.ts

import { reactRouter } from '@react-router/dev/vite';
import { defineConfig } from 'vite';
import { voidPlugin } from 'void';

export default defineConfig({
  plugins: [
    voidPlugin(), // must come before the framework plugin
    reactRouter(),
  ],
});

4. Deploy

void auth login
void deploy

Using Void Features

Most Void platform features work with React Router. Use them in loaders and actions:

Void-managed auth is not supported in framework mode yet. Use Better Auth's official React Router integration directly for now.

Database

import { users } from '@schema';
import { db } from 'void/db';
import type { Route } from './+types/users';

export async function loader({}: Route.LoaderArgs) {
  return { users: await db.select().from(users) };
}

Other resources

Use KV, object storage, and AI from server-side code with the same imports as a Void app. Add cron jobs in crons/ and queue consumers in queues/.

Environment Variables

Declare variables in env.ts and read them with import { env } from "void/env". See Environment Variables for local values, production secrets, and public VITE_* values.

Read server secrets in a .server.ts companion module and import it into your loader or action. Void rejects server-secret reads in route files that also contain browser components.

Accessing Bindings Directly

You can also access Cloudflare bindings via the cloudflare:workers module:

import { env } from 'cloudflare:workers';

const { results } = await env.DB.prepare('SELECT * FROM users').all();