Browse Documentation
Foundation
Platform
Capabilities
Product
Core Platform
Core Platform
Developers
Operations
Business
Billing and Plans
Billing and Plans
React Router & Remix belongs to the same runtime contract, but it should still feel native to its own request boundary.
Shared loader and action control for data-router applications that need the same runtime contract. Choose the wrapper when the framework owns route resolution, hooks, loaders, or middleware order. The page should help you choose this surface deliberately, compare it against its lane neighbors, and keep operator proof in reach while you wire the integration.
lane family
6
App framework
package line
1
@cosantoir/remix · @cosantoir/react-router
contract vars
3
Shared across wrappers and native SDKs
operator lanes
2
Plus 2 native package families
Surface fit
Choose this surface when the boundary is real, not convenient.
A better docs system tells you why this lane exists, what makes it distinct, and how it hands off to the rest of the platform.
Use this when
Choose the wrapper when the framework owns route resolution, hooks, loaders, or middleware order.
Package line
@cosantoir/remix · @cosantoir/react-router
The install and contract line should stay recognizable even when the request lifecycle changes.
First proof
Protect one real route, loader, or handler first, then read the resulting headers and decision state before broadening the rollout.
Install line
React Router & Remix package install
01pnpm add @cosantoir/remix @cosantoir/react-router @cosantoir/nodeShared contract
Runtime identity
01COSANTOIR_GATEWAY_URL=http://localhost:400002COSANTOIR_API_KEY=dp_live_example03COSANTOIR_SITE_ID=site_prod_webContract discipline
The framework changes. The contract should not.
This is the point where the left rail, page body, and right rail need to agree: the package can change, but the gateway origin, runtime key, site id, and proof loop stay the same.
01
COSANTOIR_GATEWAY_URL
Keep this value aligned across application middleware, direct SDK probes, and operator tooling so the same request path stays explainable.
02
COSANTOIR_API_KEY
Keep this value aligned across application middleware, direct SDK probes, and operator tooling so the same request path stays explainable.
03
COSANTOIR_SITE_ID
Keep this value aligned across application middleware, direct SDK probes, and operator tooling so the same request path stays explainable.
Lane neighbors
Neighbor surfaces
A mature docs system makes adjacent choices visible. If this page is not the right boundary, the best alternative should already be in front of you.
App framework
Next.js
Proxy and route-handler protection for App Router and middleware-heavy request paths.
App framework
Astro
SSR middleware entry point for Astro request handling.
App framework
Nuxt
Server middleware surface for Nuxt application routes.
App framework
SvelteKit
Hook-based enforcement for SvelteKit routes and endpoints.
App framework
SolidStart
Middleware surface for SolidStart request handling.
Handoff
Node.js
Direct evaluator client for custom servers, bespoke middleware order, and exact transport control.
Handoff
CLI
Terminal lane for login, request probes, and telemetry-backed operator workflows.
Handoff
MCP
Model-facing tool server for safe policy and evaluator access.
Launch route
Quickstart
Wire a first protected request and stop only when the receipt is explainable.
Control map
Architecture
Trace how the wrapper, gateway, evaluator, and dashboard stay on the same contract line.
Operator lane
CLI
Bootstrap credentials, run probes, and inspect runtime decisions without leaving the terminal.
Agent lane
MCP
Expose bounded runtime tools to model workflows without widening system reach.
Detailed guide
React Router & Remix page guide
The framework-specific instructions live below, but they now sit inside a stronger system: lane fit above, contract line beside, neighbors nearby.
# React Router & Remix Integration
Use the shared loader helper for data-router requests that need a policy decision before rendering.
## Usage
``ts
import type { ActionFunctionArgs } from '@remix-run/node';
import { json } from '@remix-run/node';
import { createCosantoir } from '@cosantoir/node';
import { createCosantoirRemixLoader } from '@cosantoir/remix';
const client = createCosantoir({
baseUrl: process.env.COSANTOIR_GATEWAY_URL!,
apiKey: process.env.COSANTOIR_API_KEY!,
siteId: process.env.COSANTOIR_SITE_ID!
});
export const loader = createCosantoirRemixLoader({ client });
export async function action({ request }: ActionFunctionArgs) {
const ip = request.headers.get('x-forwarded-for') || '127.0.0.1';
const decision = await client.waf.evaluate({ ip, method: request.method, path: new URL(request.url).pathname });
if (decision.result?.action === 'block') throw new Response('Forbidden', { status: 403 });
return json({ data: 'Secure' });
}
``